innerHTML 在事件处理函数（Javascript）中不起作用答案

【问题标题】：innerHTML not working inside event handler function (Javascript)innerHTML 在事件处理函数（Javascript）中不起作用
【发布时间】：2016-04-27 10:36:59
【问题描述】：

我创建了一个函数 updatePrice，我已将它绑定到我的 HTML 表单中的复选框和单选按钮上的“单击”事件。每个复选框和单选基本上代表一个项目，它的价格作为这些<input> 元素的值属性。当我选中或取消选中任何框时，该函数会触发，遍历表单中的所有元素，并将所有选中项目的总价格更新到我的表单下方的 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 函数吗？

我对编程还是比较陌生，所以如果这是一个基本问题，请原谅我。

【问题讨论】：

标签： javascript forms events checkbox radio

【解决方案1】：

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

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

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

【讨论】：

是的 - 这就是原因。当i==form.length 然后form[i] 引发错误时，函数退出并且最终的document.getElementById ... 永远不会执行。
哦，是的，谢谢！现在看看。所以在前者中，它“工作”是因为在打印行之后发生错误，所以在函数退出之前仍然打印了行，但在后者中，它没有，因为函数在行之前退出被打印。谢谢！

【解决方案2】：

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

for (vari = 0; i

【讨论】：

是的 = 是问题所在。谢谢:)