Question

我创建了8个最大动态输入框，一次点击一个。我想将它们的值存储在数组中，如果我添加了4个按钮，将4个值存储到数组中并在alert中显示它们，如果我添加了5个值，则将5个值存储到数组中并在alert中显示它们等到目前为止我做了什么：

使用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设置为输入 - 1，输入 - 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);
}

Answer 2

正如人们提到的，即使没有8个输入元素，你也会迭代8次。使用类选择器和jQuery以及为共享该类的每个元素进行迭代会更容易。

＆＃13;

function show(){
    var data = [];
    $.each($('.input-item'), function(key, val){
        data.push($(val).val());
    })
   alert(data);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type="text" id="input-1" class="input-item" />
  <input type="text" id="input-2" class="input-item" />
  <input type="text" id="input-3" class="input-item" />
  <input type="text" id="input-4" class="input-item" />
  <input type="text" id="input-5" class="input-item" />
  <input type="text" id="input-6" class="input-item" />
  <input type="text" id="input-7" class="input-item" />
  <input type="text" id="input-8" class="input-item" />
  <button type="button" onclick="show()">Click me</button>
</form>

＆＃13;

Answer 3

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

  }
  alert(data);
}

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

3 个答案: