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

innerHTML not working inside event handler function (Javascript)

本文关键字：Javascript 不起作用 函数 事件处理 程序 innerHTML      更新时间：2023-09-26

我创建了一个函数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 的 {} 中写下该行才能工作。价格变量的范围不会扩展到整个 updatePrice 函数吗？

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

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

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

之所以没有打印任何内容，是因为在最后一个循环中，函数错误并且您设置的内部 HTML 永远不会被执行。

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

for （ var i = 0; i

相关文章：