Question

目标是在数组中添加另一个项目，并创建一个像[“Car”，“House”，“Boat”]等数组。

当我登录日志时，我的数组中只有一个项目而不是我从表单提交的所有值。

这是我的表格

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

我的js

function guardarNumeros(){

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

}

谢谢！

Answer 1

您的items数组属于guardarNumeros函数的范围，并且每次调用guardarNumeros时都会声明，如果您希望它持续存在，则需要在外部：

var items = [];

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

如评论中所述，表单提交将默认刷新页面，以防止您需要返回false：

<form onsubmit="return guardarNumeros()">

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

Answer 2

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

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

const scripts = Polymer.ResolveUrl.resolveUrl('./redux-scripts.html');
Polymer.importHref(scripts, null, null, false);

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

Answer 3

您必须在函数外声明数组。因为无论何时按下提交按钮，都会创建一个新的数组对象，而前一个数组对象因范围而丢失。

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

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

var items = [];

function guardarNumeros(){

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

}

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

function guardarNumeros(items){

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

    }

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

JavaScript - 从输入框向数组添加值

3 个答案: