用于汇总连接到复选框的价格的 JavaScript 函数？

Question

已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。

---

这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。

已关闭 3 年前。

Improve this question

我尝试创建一个脚本，但它不起作用，我不明白为什么......

JS

var itmlist = document.getElementsByClassName('item')[0];
var event = document.getElementsByName('event[]')[0];
var price = document.querySelector('[data-price]');
var ttlprice = 0;

function totalPrice() {
  var i;
  for (i = 0; i < itmlist.length; i++) {
    if (chk.checked) {
      ttlprice = price + ttlprice;
    }
  }
  document.getElementById("total").value = ttlprice;
}

totalPrice();

<!-- HTML for total text box -->
<section id="checkCost">
  <h2>Total cost</h2>
  Total <input type="text" name="total" size="10">
</section>

<!-- HTML for items (Multiple items) -->

<div class="item">
  <span class="eventTitle">Summer F</span>
  <span class="eventStartDate">2020-12-07</span>
  <span class="eventEndDate">2020-12-07</span>
  <span class="catDesc">Fam</span>
  <span class="venueName">Baltic</span>
  <span class="eventPrice">0.00</span>
  <span class="chosen"><input type="checkbox" name="event[]" value="12" data-price="0.00"></span>
</div>

Answer 1

如果运行发布的代码，错误消息是

"Uncaught TypeError: Cannot set property 'value' of null",

由此我们可以推断出语句 document.getElementById("total")为空(它是您尝试分配属性的唯一位置 value )

如果我们查看相关的 html 元素 <input type="text" name="total" size="10">我们可以看到它没有设置 Id，尽管您尝试通过 Id ( getElementById ) 访问它。一个简单的解决方案可能是向 html 元素添加 Id:

<input id="total" type="text" name="total" size="10">

经过进一步调查，该代码还存在其他几个问题

• 单击复选框时不会运行计算，因此可以通过向复选框添加事件处理程序以重新运行计算来解决此问题
• itmlist 仅选择第一项，因此不会对所有选中的项目求和

我发布了一个根据您的代码修改的代码，该代码适用于多个项目

function totalPrice() {
  var itmlist = document.getElementsByClassName('item');
  var ttlprice = 0;
  for (var i = 0; i < itmlist.length; i++) {
    var check = itmlist[i].getElementsByClassName("price-box")[0];
    if (check.checked) {
      ttlprice += parseInt(check.dataset.price);
    }
  }
  document.getElementById("txtTotalPrice").value = ttlprice;
}

totalPrice();

<!-- HTML for total text box -->
<section id="checkCost">
  <h2>Total cost</h2>
  Total <input id="txtTotalPrice" type="text" name="total" size="10">
</section>

<!-- HTML for items (Multiple items) -->

<div class="item">
  <span class="eventTitle">Summer F</span>
  <span class="eventStartDate">2020-12-07</span>
  <span class="eventEndDate">2020-12-07</span>
  <span class="catDesc">Fam</span>
  <span class="venueName">Baltic</span>
  <span class="eventPrice">5.00</span>
  <span class="chosen"><input type="checkbox" class="price-box" name="event[]" value="12" data-price="5" onclick="totalPrice()"></span>
</div>
<div class="item">
  <span class="eventTitle">Summer F</span>
  <span class="eventStartDate">2020-12-07</span>
  <span class="eventEndDate">2020-12-07</span>
  <span class="catDesc">Fam</span>
  <span class="venueName">Baltic</span>
  <span class="eventPrice">10.00</span>
  <span class="chosen"><input type="checkbox" class="price-box" name="event[]" value="12" data-price="10" onclick="totalPrice()"></span>
</div>