javascript - 多行自动相乘

Question

我是编码新手，因此我们将不胜感激。

我正在尝试对 2 个值进行自动乘法。基本上我的 table 看起来像 this 。乘法在第一行完美运行。如果我通过简单地复制此代码来创建另一行:

<tr>
   <td><input id="box1" type="text" oninput="calculate()" /></td>
   <td><input id="box2" type="text" oninput="calculate()" /></td>
   <td><input id="result" /></td>
</tr>

那么第二行就不起作用了。发生这种情况可能是因为第二行的 id 与第一行完全相同。但如果我更改id，脚本也将无法工作。您能告诉我如何修复它吗？

编辑:我将此脚本用于乘法目的:

function calculate() {
    var myBox1 = document.getElementById('box1').value; 
    var myBox2 = document.getElementById('box2').value;
    var result = document.getElementById('result'); 
    var myResult = myBox1 * myBox2;
    result.value = myResult;
    }

Answer 1

我会绑定(bind)一个input表的事件处理程序，它将捕获任何 input任何表格单元格的输入元素上的事件。在处理程序内event.target将引用事件起源的输入元素，您可以使用 DOM 导航属性/方法来查找同一行中的关联表格单元格。

也许有点像这样，使用 class而不是id :

document.getElementById("multiplier").addEventListener("input", function(e) {
  var row = e.target.parentNode.parentNode
  var val1 = row.querySelector(".valOne").value
  var val2 = row.querySelector(".valTwo").value
  row.querySelector(".result").value = val1 * val2
})

<table id="multiplier">
<tr>
   <td><input class="valOne" type="text" /></td>
   <td><input class="valTwo" type="text" /></td>
   <td><input class="result" /></td>
</tr>
<tr>
   <td><input class="valOne" type="text" /></td>
   <td><input class="valTwo" type="text" /></td>
   <td><input class="result" /></td>
</tr>
<tr>
   <td><input class="valOne" type="text" /></td>
   <td><input class="valTwo" type="text" /></td>
   <td><input class="result" /></td>
</tr>
</table>

进一步阅读:

• .addEventListener() method
• .parentNode property
• .querySelector() method

最好使用e.target.closest("tr")而不是e.target.parentNode.parentNode ，但请注意 .closest() method IE 不支持，因此您需要使用 polyfill .

请注意，我显示的 JS 需要位于表格之后的脚本元素中(例如，位于结束 </body> 标记之前的正文末尾) ，或者您需要将其包装在文档加载或 DOMContentLoaded 处理程序中。