innerHTML 在事件處理程序 function (Javascript) 中不起作用

Question

我創建了一個 function，updatePrice，我已將其綁定到我的 HTML 表單中的復選框和單選按鈕上的“單擊”事件。 每個復選框和單選基本上代表一個項目，它的價格作為這些<input>元素的 value 屬性。 當我選中或取消選中任何框時，function 會觸發，循環遍歷表單中的所有元素，並將所有選中項目的總價格更新為我在表單下方的 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 的 {} 中寫下這一行才能工作。 價格變量的 scope 不是延伸到整個 updatePrice function 嗎？

我對編程還是很陌生，所以如果這是一個基本問題，請原諒我。

Answer 1

在我看來，它沒有打印，因為您正在導致錯誤。 由於數組索引從 0 開始，您的 for 循環不應使用<=而應使用< ：

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

然后什么都沒有打印的原因是因為在最后一個循環中 function 錯誤並且您設置內部 HTML 永遠不會被執行。

Answer 2

似乎您的代碼有錯誤，如何將var添加到您的 for 循環並從i<=form.length中刪除 =

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