Question

我有2个<p>标签和一个输入字段，包含在while循环中

<p id="price"></p>
<input  id="quantity"  oninput="calculate(<?php echo $cprice; ?>)" type="text" name="quantity">
<p id="total"></p>

我想使用JavaScript来执行算术。

我希望将价格和数量相乘并总计显示结果。没有while循环，它可以工作但是使用while循环，它只更新第一个字段。

function calculate(price) {
        var quantity = document.getElementById('quantity').value;
        var result = document.getElementById('total');  
        var myResult = price * quantity;
        document.getElementById('total').innerHTML = myResult;
}

我不知道如何使用js

动态更新total标记

Answer 1

您需要将ID更改为类，因为ID必须是唯一的。

参见假设价格总是在那里的例子

我选择不使用nextElement，因为您可以轻松地将其他内容添加到html中，而不是

我还使代码不引人注目，而不是使用内联处理程序

＆＃13;

document.querySelectorAll(".quantity").forEach(function() {
  this.oninput = function() {
    var q = document.querySelectorAll(".quantity"),
      p = document.querySelectorAll(".price"),
      total = 0;
    q.forEach(function(qt, index) {
      var price = +p[index].innerText,
        quantity = +qt.value;
      if (!isNaN(quantity)) total += price * quantity;
    })
    document.getElementById('total').innerHTML = total;
  }
})

＆＃13;

<p class="price">1</p>
<input class="quantity" type="text" name="quantity">
<p class="price">2</p>
<input class="quantity" type="text" name="quantity">
<p class="price">3</p>
<input class="quantity" type="text" name="quantity"><br/>
Total:<p id="total"></p>

＆＃13;

Answer 2

ID必须是唯一的。如果有重复项，document.getElementById将返回第一个。

使用DOM导航方法，而不是使用ID。您可以传入this以获取对input元素的引用，然后在其后面找到输出元素。

＆＃13;

function calculate(price, input) {
  var quantity = input.value;
  var result = input.nextElementSibling;
  var myResult = price * quantity;
  result.innerHTML = myResult;
}

＆＃13;

<p class="price">Price = 30</p>
<input class="quantity" oninput="calculate(30, this)" type="text" name="quantity">
<p class="total"></p>

<p class="price">Price = 45</p>
<input class="quantity" oninput="calculate(45, this)" type="text" name="quantity">
<p class="total"></p>

＆＃13;

使用JS计算PHP while循环中的元素

2 个答案: