在一个命令getElementById中引用几个ID

Question

我有如下代码：

function getRowMarkup(rowNo) {
  return '<tr class="row" data-row-no="'+rowNo+'"> \
    <td class="row-no">'+rowNo+'.</td> \
    <td><input type="text" name="ItemUnit_'+rowNo+'" class="item-unit" /></td> \
    <td><input type="text" name="ItemUnit_'+rowNo+'" class="item-unit" /></td> \
    <td><input type="text" name="ItemUnit_'+rowNo+'" class="item-unit" /></td> \
    <td><input type="number" name="ItemUnit_'+rowNo+'" class="item-unit" id="jeden'+rowNo+'"/></td> \
    <td><input type="number" name="ItemUnit_'+rowNo+'" class="item-unit" id="dwa'+rowNo+'"/></td> \
    <td><div  class="item-unit" id="trzy'+rowNo+'"/></div></td> \
    <td><a href="javascript:void(0);" class="delete-row">Delete</a></td> \
    </tr>';
}

此功能正常工作，并将新位置添加到表格中。 我想要一个按钮，该按钮将计算输入为id =“” jeden'+ rowNo +'“”和id =“ dwa'+ rowNo +'”的输入，并向我显示id =“ trzy'+ rowNo +'”的div得分。 我该如何修复下面的代码以在getElementById中获取变量ID。 正如您可能想象的那样，添加新行后id将会改变，它们将具有nextnumber，因此将是例如jeden1，jeden2，jeden3等。如何将这些变量id放入我的代码中。

function numberMult() {
  var firstNumber = Number(document.getElementById("jeden"+"rowNo").value);
  var secondNumber =Number(document.getElementById("dwa"+"rowNo").value);
  var result = firstNumber * secondNumber
  document.getElementById("trzy"+"rowNo").innerHTML = result;
}; 

感谢帮助。

Answer 1

1）您不能使用getElementById引用几个ID。 它返回由id选择的单个元素。 也许您会对querySelectorAll感兴趣

2）rowNo是一个变量，您的实际标记是使用该变量的值生成的，因此，您可能会有id，例如id="jeden0" ， id="jeden1"等。

3）在你的函数numberMult你需要传递变量rowNo就像getRowMarkup

4）然后使用此变量选择元素。 就像是：

function numberMult(rowNo) {
  // do not use quotes for variable
  var firstNumber = Number(document.getElementById("jeden"+rowNo).value);
  var secondNumber =Number(document.getElementById("dwa"+rowNo).value);
  var result = firstNumber * secondNumber
  document.getElementById("trzy"+rowNo).innerHTML = result;
};