JavaScript - 将输入框的值添加到数组

JavaScript - Add Value from input box to array

提问by Hugo Seleiro

The objective is to add another item to the array, and make an array like ["Car", "House" , "Boat"] etc.

目标是向数组中添加另一个项目，并创建一个像 ["Car", "House" , "Boat"] 等的数组。

What is happening is when i console log, i only have one item in my array and not all the values i submit from form.

发生的事情是当我控制台日志时，我的数组中只有一项，而不是我从表单提交的所有值。

This is my form

这是我的表格

<form onsubmit="guardarNumeros()">
 <p>Please insert the items</p>
 <input type="text" id="box">
 <input type="submit" value="Submit">
</form>

My js

我的js

function guardarNumeros(){

 var items = [];
 boxvalue = document.getElementById('box').value;
 items.push(boxvalue);  
 console.log(items);

}

Thank You !

谢谢你 ！

回答by UncleDave

Your itemsarray is within the scope of your guardarNumerosfunction and will get declared every time guardarNumerosis called, if you want it to persist it needs to be outside:

你的items数组在你的guardarNumeros函数范围内，每次guardarNumeros被调用时都会被声明，如果你想让它持久化，它需要在外面：

var items = [];

function guardarNumeros() {
  boxvalue = document.getElementById('box').value;
  items.push(boxvalue);  
  console.log(items);
}

As mentioned in the comments a form submission will refresh the page by default, to prevent this you need to return false:

正如评论中提到的，表单提交将默认刷新页面，为了防止这种情况，您需要返回 false：

<form onsubmit="return guardarNumeros()">

---

---

function guardarNumeros() {
  boxvalue = document.getElementById('box').value;
  items.push(boxvalue);  
  console.log(items);
  return false;
}

回答by amyloula

http://plnkr.co/edit/mGLCT97QwM8CvD3I5yUp?p=preview

http://plnkr.co/edit/mGLCT97QwM8CvD3I5yUp?p=preview

By including the items inside the scope of your functions you were declaring the array every time.

通过在函数范围内包含项目，您每次都在声明数组。

var items = [];

function guardarNumeros() {
  boxvalue = document.getElementById('box').value;
  items.push(boxvalue);
  console.log(items);
  return false; // stop submission
}

<form onsubmit="return guardarNumeros()">
  <p>Please insert the items</p>
  <input type="text" id="box">
  <input type="submit" value="Submit">
</form>

回答by HM Nayem

You have to declare the array outside the function. because whenever you hit the submit button a new array object is being created and the previous one is being lost because of scope.

您必须在函数外部声明数组。因为每当您点击提交按钮时，都会创建一个新的数组对象，而前一个对象由于作用域而丢失。

You know if we declare a variable inside any function this variable is only visible in this function. Outside this function we can't access it. In your case you declare an array inside the function, then push value to it and also log it. But if you try to access this array from outside the function you will get error if you use strict mode.

你知道如果我们在任何函数中声明一个变量，这个变量只在这个函数中可见。在此功能之外，我们无法访问它。在您的情况下，您在函数内声明一个数组，然后将值推送给它并记录它。但是，如果您尝试从函数外部访问此数组，则在使用严格模式时会出现错误。

Just declare the array in global scope, or also you can pass the array as an argument. this will solve your problem..

只需在全局范围内声明数组，或者您也可以将数组作为参数传递。这将解决您的问题..

var items = [];

function guardarNumeros(){

 boxvalue = document.getElementById('box').value;
 items.push(boxvalue);  
 console.log(items);

}

Or use this. But make sure you declare the array anywhere in parent function where you call the function.

或者用这个。但是请确保在调用该函数的父函数中的任何位置声明该数组。

function guardarNumeros(items){

     boxvalue = document.getElementById('box').value;
     items.push(boxvalue);  
     console.log(items);

    }

In this case you also have to check some condition...

在这种情况下，您还必须检查一些条件...