Question

我有以下三个输入：

<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 >

输入价格和数量时，以下函数计算总数：

function calculate() {
    var price = document.getElementById('cost').value;  
    var num = document.getElementById('quantity').value;
    var total1 = document.getElementById('total');  
    var myResult = price * num;
    total.value = myResult;
}

三个输入可以重复未知次数，具体取决于数据库表中的条目数。我想在所有输入上使用相同的功能，但尽管搜索了几个小时，我还没有进一步前进。我相信我需要使用getElementsByName。任何帮助将非常感谢。

Answer 1

使用getElementsByClassName（）

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

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;
 }

}

和你的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 >

参见演示：http://jsbin.com/kabuduzozo/edit?html,js,output

Answer 2

将您的输入组合在一起。因此，只需一个输入，您就可以轻松找到其他输入。然后使用calculate(this)代替calculate()。在这种情况下，this指的是已更改的输入。

＆＃13;

function calculate(e) {
  var div = e.parentNode;
  var c = div.querySelector('.cost').value;
  var q = div.querySelector('.quantity').value;
  div.querySelector('.total').value = c * q;
}

＆＃13;

<div>
  <input type="text" class="cost" oninput="calculate(this)" value="">
  <input type="text" class="quantity" oninput="calculate(this)" value="">
  <input type="text" class="total" value="" readonly>
</div>
<div>
  <input type="text" class="cost" oninput="calculate(this)" value="">
  <input type="text" class="quantity" oninput="calculate(this)" value="">
  <input type="text" class="total" value="" readonly>
</div>
<div>
  <input type="text" class="cost" oninput="calculate(this)" value="">
  <input type="text" class="quantity" oninput="calculate(this)" value="">
  <input type="text" class="total" value="" readonly>
</div>

＆＃13;

使用相同的计算n次

2 个答案:

使用getElementsByClassName（）