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

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 更改为 class，因为 ID 必须是唯一的。

查看假设价格始终存在的示例

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

我还让代码不显眼，而不是使用内联处理程序

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

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

Answer 2

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

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

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

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