Javascript 使用相同的计算n次

我有以下三个输入：

<input type="text" name="cost" id="cost"  oninput="calculate()" value="">
<input type="text" name="quantity" id="quantity" oninput="calculate()" value="">
<input type="text" name="total" id="total" value="" readonly >

根据数据库表中条目的数量，这三个输入可以重复未知的次数。我想在所有的输入上使用相同的函数，但是尽管搜索了几个小时，我没有进一步的进展。我相信我需要使用getElementsByName。任何帮助都将不胜感激

使用getElementsByClassName（） 对重复输入使用相同的类名，并使用document.getElementsByCassName（）函数访问它们，如下所示：

function calculate() {
 var classes = document.getElementsByClassName('cost').length;
 for(i=0; i< classes; i++)
 {
    var price = document.getElementsByClassName('cost')[i].value;  
    var num = document.getElementsByClassName('quantity')[i].value;

    var myResult = price * num;
    document.getElementsByClassName('total')[i].value = myResult;
 }

}

函数计算（）{
var classes=document.getElementsByClassName（'cost'）.length；
对于（i=0；i

还有你的html

  <h2>Group 1:</h2>

<input type="text" name="cost" class="cost" id="cost1"  oninput="calculate()" value="">
<input type="text" name="quantity" class="quantity" id="quantity1" oninput="calculate()" value="">
<input type="text" name="total" class="total" id="total1" value="" readonly >

  <h2>Group 2:</h2>

<input type="text" name="cost" class="cost" id="cost2"  oninput="calculate()" value="">
<input type="text" name="quantity" class="quantity" id="quantity2" oninput="calculate()" value="">
<input type="text" name="total" class="total" id="total2" value="" readonly >

  <h2>Group 3:</h2>

<input type="text" name="cost" class="cost" id="cost3"  oninput="calculate()" value="">
<input type="text" name="quantity" class="quantity" id="quantity3" oninput="calculate()" value="">
<input type="text" name="total" class="total" id="total3" value="" readonly > 

1组：
第2组：
第3组：

请参见演示：

使用getElementsByClassName（） 对重复输入使用相同的类名，并使用document.getElementsByCassName（）函数访问它们，如下所示：

function calculate() {
 var classes = document.getElementsByClassName('cost').length;
 for(i=0; i< classes; i++)
 {
    var price = document.getElementsByClassName('cost')[i].value;  
    var num = document.getElementsByClassName('quantity')[i].value;

    var myResult = price * num;
    document.getElementsByClassName('total')[i].value = myResult;
 }

}

函数计算（）{
var classes=document.getElementsByClassName（'cost'）.length；
对于（i=0；i

还有你的html

  <h2>Group 1:</h2>

<input type="text" name="cost" class="cost" id="cost1"  oninput="calculate()" value="">
<input type="text" name="quantity" class="quantity" id="quantity1" oninput="calculate()" value="">
<input type="text" name="total" class="total" id="total1" value="" readonly >

  <h2>Group 2:</h2>

<input type="text" name="cost" class="cost" id="cost2"  oninput="calculate()" value="">
<input type="text" name="quantity" class="quantity" id="quantity2" oninput="calculate()" value="">
<input type="text" name="total" class="total" id="total2" value="" readonly >

  <h2>Group 3:</h2>

<input type="text" name="cost" class="cost" id="cost3"  oninput="calculate()" value="">
<input type="text" name="quantity" class="quantity" id="quantity3" oninput="calculate()" value="">
<input type="text" name="total" class="total" id="total3" value="" readonly > 

1组：
第2组：
第3组：

---

请参见演示：

将您的输入分组在一起。因此，给定一个输入，您可以轻松找到其他输入。然后使用

calculate（this）

而不是

calculate（）

<代码>此在本例中指的是已更改的输入

函数计算（e）{
var div=e.parentNode；
var c=div.querySelector（“.cost”）.value；
var q=div.querySelector（'.quantity'）。值；
div.querySelector（'.total'）。值=c*q；
}

---

将您的输入分组在一起。因此，给定一个输入，您可以轻松找到其他输入。然后使用

calculate（this）

而不是

calculate（）

<代码>此在本例中指的是已更改的输入

函数计算（e）{
var div=e.parentNode；
var c=div.querySelector（“.cost”）.value；
var q=div.querySelector（'.quantity'）。值；
div.querySelector（'.total'）。值=c*q；
}

+1和注释，元素ID应该是唯一的，这是一种非常糟糕的方法<代码>计算不应重新计算所有字段的总计，这不是必需的。再加上每次更改都要重新查询DOM@编造者提供了不错的解决方案。同意，@编造者更优雅、更精简，我给了他+1。谢谢你，沙迪，这是我的想法，但我没能做到。+1和一条评论，元素ID应该是唯一的，这是一个非常糟糕的方法<代码>计算不应重新计算所有字段的总计，这不是必需的。再加上每次更改都要重新查询DOM@加工商提供了不错的解决方案。同意，@加工商更优雅、更精益，我给了他+1。谢谢你，沙迪，这是我想的，但我没能做到。谢谢加工商，这是一个多么优雅简单的解决方案！感谢制造商，这是一个多么优雅简单的解决方案！