我将两个输入相乘，显示在一个“总计”框中，但它不会乘以其他行

Question

​

 function calculate() {
        var myBox1 = document.getElementById('qid').value;
        var myBox2 = document.getElementById('uid').value;
        var result = document.getElementById('subsubtotal');
        var myResult = myBox1 * myBox2;
        result.value = myResult.toFixed(2);
    }

<tr>
    <td><form><input type="number" oninput="calculate()" id="qid" data-quantity name="qamount"  min="0" data-validation="number" class="qinput txt" value="{{Quantity}}" /></form></td>
    <td><form><input type="text" data-validation="length" data-validation-length="max100" class="dinput" value="{{Details}}" /></form></td>
    <td><form><input type="number" oninput="calculate()" id="uid" data-unitprice name="uamount" min="0" data-validation="number" data-validation-allowing="float" class="uinput txt" value="{{UnitPrice}}" /></form></td>
    <td><form><input readonly id="subsubtotal" name="totalamount" class="sinput txt" value="{{Subtotal}}" /></form></td>  
</tr>

​

这就是我所说的，它只是乘以上面的一行，而不是下面的一行。代码计算顶部的行，但是下面的行(通过单击按钮添加)等等不计算。

Answer 1

默认情况下，来自<input>的值将是一个string。在乘法之前，您需要解析它们。

正如@Ronen 所提到的，我认为在form中包装内容没有任何意义。

更新：

这是因为id属性。id在整个文档中应该是唯一的。因此，下一行中的输入框应该有不同的id。检查下面的示例。

​

function calculate(obj) {
  var tr = obj.parentNode.parentNode;

  var myBox1 = tr.cells[0].children[0].value;
  var myBox2 = tr.cells[2].children[0].value;
  var result = tr.cells[3].children[0];
  var myResult = parseFloat(myBox1) * parseFloat(myBox2);
  result.value = myResult.toFixed(2);
}

<table>
  <tr>
    <td><input type="number" oninput="calculate(this)" id="qid1" data-quantity name="qamount" min="0" data-validation="number" class="qinput txt" value="{{Quantity}}" /></td>
    <td><input type="text" data-validation="length" data-validation-length="max100" class="dinput" value="{{Details}}" /></td>
    <td><input type="number" oninput="calculate(this)" id="uid1" data-unitprice name="uamount" min="0" data-validation="number" data-validation-allowing="float" class="uinput txt" value="{{UnitPrice}}" /></td>
    <td><input readonly id="subsubtotal" name="totalamount" class="sinput txt" value="{{Subtotal}}" /></td>
  </tr>

  <tr>
    <td><input type="number" oninput="calculate(this)" id="qid2" data-quantity name="qamount" min="0" data-validation="number" class="qinput txt" value="{{Quantity}}" /></td>
    <td><input type="text" data-validation="length" data-validation-length="max100" class="dinput" value="{{Details}}" /></td>
    <td><input type="number" oninput="calculate(this)" id="uid2" data-unitprice name="uamount" min="0" data-validation="number" data-validation-allowing="float" class="uinput txt" value="{{UnitPrice}}" /></td>
    <td><input readonly id="subsubtotal" name="totalamount" class="sinput txt" value="{{Subtotal}}" /></td>
  </tr>
</table>

​