带值的标签，但返回**未捕获的TypeError：无法读取null的属性'value'**

Question

为什么这总是返回Uncaught TypeError：无法读取null的属性'值'我在文本中有输入的地方？

document.getElementById('productQuantity' + i).value

而且，无论何时删除某行，我都能够添加一个删除按钮来替换下图所示的添加按钮，并从我声明的数组对象中删除该行中的值？

newSelection.children[1].children[0].id = 'selection01' + selection.length;
newSelection.children[2].children[0].id = 'selection02' + selection.length;
newSelection.children[3].children[0].id = 'productQuantity' + selection.length;

html的图像（部分）

克隆前

克隆后

期望的结果

HTML页面

                <div id="selections">
                  <div class="form-group row controls selection">
                      <label for="selection01" class="col-sm-2 col-form-label">Selection Pair</label>
                      <div class="col-sm-2">
                          <select class="form-control selection01" id="selection010" placeholder="Selection 01" onchange="addNewSelection()"></select>
                      </div>
                      <div class="col-sm-2">
                          <select class="form-control selection02" id="selection020" placeholder="Selection 02" onchange="addNewSelection()"></select>
                      </div>
                      <div class="col-sm-2">
                        <input type="number" min="0.00" max="10000.00" step="1.00" class="form-control" id="productQuantity" placeholder="Quantity">
                      </div>
                      <div class="col-sm-2">
                        <input type="button" class="btn btn-success" id="addSelection" value="Add Selection" onclick="addNewSelectionPair()"></button>
                      </div>
                  </div> 
                </div>  

---

脚本

  function addNewSelectionPair() {
    // Get all selections by class
    var selection = document.getElementsByClassName('selection');

    // Get the last one
    var lastSelection = selection[selection.length - 1];

    // Clone it
    var newSelection = lastSelection.cloneNode(true);

    // Update the id values for the input
    newSelection.children[1].children[0].id = 'selection01' + selection.length;
    newSelection.children[2].childrne[0].id = 'selection02' + selection.length;
    newSelection.children[3].children[0].id = 'productQuantity' + selection.length;    

    // Add it to selectionss
    document.getElementById('selections').appendChild(newSelection)
  }

  function getValues() {
    // Get all selections by class
    var selections = document.getElementsByClassName('selection');
    var values = [];

    for(var i = 0; i < selections.length; i++) {
      // Add the values into the array
      values.push([
        document.getElementById('selection01' + i).value,
        document.getElementById('selection02' + i).value
        document.getElementById('productQuantity' + i).value
      ]);
    }

    return values;
  }

Answer 1

此脚本将复制输入的最后一行。它还将收集输入并将其值存储在3d数组中以进行处理。

function addSection() {
  //Get all sections by class
  var sections = document.getElementsByClassName('section');

  //Get the last one
  var lastSection = sections[sections.length - 1];
  
  //Clone it
  var newSection = lastSection.cloneNode(true);
  
  //Update the id values for the inputs  
  newSection.children[0].id = 'color' + sections.length;
  newSection.children[1].id = 'size' + sections.length;
  
  //Add it do sections
  document.getElementById('sections').appendChild(newSection);
}

function getValues() {
  //Get all sections by class
  var sections = document.getElementsByClassName('section');
  var values = [];
  
  //Loop the sections
  for(var i = 0; i < sections.length; i++) {
    //Add the values to the array
    values.push([
      document.getElementById('color' + i).value, 
      document.getElementById('size' + i).value
    ]);
  }
  
  return values;
}

<div>
  <div>
    <h2>Product</h2>
    <input id="product" placeholder="Product" />
  </div>
  <div id="sections">
    <div class="section">
      <input id="color0" placeholder="Color" />
      <input id="size0" placeholder="Size" />
    </div>
  </div>
  <button onclick="addSection()">Add Section</button>
</div>

<button onclick="
  document.getElementById('values').innerHTML = JSON.stringify(getValues());
">Get Values</button>

<div id="values"></div>