javascript - 如何将动态添加的输入框的值添加到数组中？

Question

我最多创建 8 个动态输入框，点击一次一个。我想将它们的值存储在一个数组中，如果我添加了 4 个按钮，则将 4 个值存储到数组中并在警报中显示它们，如果我添加了 5 个值，则将 5 个值存储到数组中并在警报中显示它们等.到目前为止我所做的事情:

Javascript:

function show(){
  var data = [];
  for(fieldValue=1;fieldValue<=8;fieldValue++){
    var input = document.getElementById('input - '+fieldValue).value;
    data.push(input);
  }
 alert(data);
}

如果我添加了所有 8 个输入框，它只会提醒输入框的值，否则它会显示“无法读取 null 的属性‘值’”。 编辑: 我将 ID 提供给这些输入框(部分):

  var inputField = document.createElement('INPUT');
  inputField.id = 'input - '+fieldValue;

  fieldValue++;

它将 ID 设置为 input - 1、input - 2 等等。提前致谢。

Answer 1

您正在从 1 循环到 8。

如果您添加的输入框少于 8 个(假设为 5 个)，则在某些时候 document.getElementById('input - '+fieldValue) 将返回 null，因为不会有 id 为 'input - 6' 的元素在文件中。

为了保护您的代码，您必须在尝试检索数据之前检查 document.getElementById('input - '+fieldValue) 是否不为 null。

function show(){
  var data = [];
  for(fieldValue=1;fieldValue<=8;fieldValue++){
    var input = document.getElementById('input - '+fieldValue);
    if (input != null) 
       data.push(input.value);
  }
 alert(data);
}