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

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>