innerHTML 在事件处理程序函数中不起作用 (Javascript)

Question

我创建了一个函数 updatePrice，我已将其绑定到 HTML 表单中复选框和单选按钮上的 "click" 事件。每个复选框和单选框基本上代表一个项目，其价格作为这些 <input> 元素的值属性。当我选中或取消选中任何框时，该函数将触发，循环遍历表单中的所有元素，并将所有选中项目的总价格更新为表单下方的 div 元素，其中 id 标记为 "priceOutput".

下面的代码运行完美，打印出来：该商品的价格为 $(price of item)。

function updatePrice() {
  var price = 0
  for (i=0;i<=form.length;i++) {
    var element = form[i]
    if(element.checked) {
      price+=parseInt(element.value)
    }
    document.getElementById("priceOutput").innerHTML = "The price of this item is $" + price + "."
  }
}

但是，如果我切换最后一行，则根本不会打印该行：

function updatePrice() {
  var price = 0
  for (i=0;i<=form.length;i++) {
    var element = form[i]
    if(element.checked) {
      price+=parseInt(element.value)
    }
  }
    document.getElementById("priceOutput").innerHTML = "The price of this item is $" + price + "."
}

为什么我必须在 for 的 {} 中写入该行才能工作。 price 变量的范围不是扩展到整个 updatePrice 函数吗？

我对编程还是比较陌生，如果这是一个初级问题，请原谅我。

Answer 1

在我看来它没有打印是因为你导致了一个错误。由于数组索引从 0 开始，因此您的 for 循环不应使用 <= 而是 < :

for (i=0;i<form.length;i++) {
...
}

然后什么都没有打印的原因是因为在最后一个循环中函数错误并且您设置内部 HTML 永远不会执行。

Answer 2

您的代码似乎有错误，将 var 添加到您的 for 循环并从 i<=form.length

中删除 = 怎么样？

for (var i = 0; i < form.length; i++)

innerHTML 在事件处理程序函数中不起作用 (Javascript)

innerHTML not working inside event handler function (Javascript)

javascript

forms

checkbox

events

radio