javascript - insideHTML 无法在事件处理函数内工作(Javascript)

Question

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

以下代码完美运行，打印出:该商品的价格为 $(商品价格)。

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 永远不会被执行。