当商品数量/数量发生变化时，如何更新产品价格？

Question

我有一个产品列表，我需要开发一个 JavaScript 代码来帮助通过计数器更改价格，我想在我拥有的所有产品上使用一个 JavaScript 代码实现它

这是 HTML 代码

 <h3>Almonds</h3>

    <div class="price">
      <p>Price Per ticket : $<span id="ticket_price">7</span></p>
      <p>Subtotal : <b>$<span id="total">0</span></b></p>
    </div>
    <div class="quantity">
      <span>quantity : </span>
      <input type="number" id="num" oninput="calc()" min="1" max="1000" value="1" />
      <span> kg </span>
    </div>
    <a href="#" class="btn">add to cart</a>
  </div>

JavaScript 代码

    function calc() {
  var price = document.getElementById("ticket_price").innerHTML;
  var noTickets = document.getElementById("num").value;
  var total = parseFloat(price) * noTickets
  if (!isNaN(total))
    document.getElementById("total").innerHTML = total
}

问题是 JavaScript 代码仅适用于一种产品，不适用于具有相同 ID 的其他产品*

Answer 1

问题是 getElementById() 仅适用于 DOM 中的一个元素，所以我猜它只适用于第一个元素。尝试对任何元素使用 class 或唯一的 id，例如： ticket_price_1， ticket_price_2， ticket_price_3

---

如果您想使用类，请记住您正在使用一组 DOM 对象。因此，您需要指定要修改的元素的索引：

这行不通

let element = document.getElementsByClassName("itemprice");

这应该有效

let element = document.getElementsByClassName("itemprice")[0];  //look at the index [0]

• 一个类的每个元素都有一个唯一的索引，所以你需要指定它才能修改你想要的元素。每个元素的索引取决于 HTML 文件中元素的顺序。

以下是如何使用类的示例：

let elements = document.getElementsByClassName("myclass");   // no index means get all elements with that class

console.log(elements[0].innerHTML);    // print content of first element in class (index [0])

<div class="myclass">Hello</div>
<div class="myclass">world</div>
<div class="myclass">!!!!!</div>

---

• 对于您的情况，使用类，只需将 id 更改为 class，并将 calc() 函数修改为 calc(n)，其中 n 是产品号码：

function calc(n) {
  var price = document.getElementsByClassName("ticket_price")[n].innerHTML;
  var noTickets = document.getElementsByClassName("num")[n].value;
  var total = parseFloat(price) * noTickets;
  if (!isNaN(total))
    document.getElementsByClassName("total")[n].innerHTML = total;
}

<h3>Almonds</h3>
<div class="price">
  <p>Price Per ticket : $<span class="ticket_price">7</span></p>
  <p>Subtotal : <b>$<span class="total">0</span></b></p>
</div>
<div class="quantity">
  <span>quantity : </span>
  <input type="number" class="num" oninput="calc(0)" min="1" max="1000" value="1" />
  <span> kg </span>
</div>
<a href="#" class="btn">add to cart</a>
</div>
<h3>Carrots</h3>
<div class="price">
  <p>Price Per ticket : $<span class="ticket_price">7</span></p>
  <p>Subtotal : <b>$<span class="total">0</span></b></p>
</div>
<div class="quantity">
  <span>quantity : </span>
  <input type="number" class="num" oninput="calc(1)" min="1" max="1000" value="1" />
  <span> kg </span>
</div>
<a href="#" class="btn">add to cart</a>
</div>