innerHTML not working inside event handler function (Javascript)

Question

I have created a function, updatePrice, which I have tied to the "click" event on the checkbox and radio buttons in my HTML form. Each checkbox and radio basically represents an item, with it's price as the value property of these <input> elements. When I check or uncheck any box, the function fires, loops through all elements in the form, and updates the total price of all the checked items into a div element I have below my form, with the id tag "priceOutput".

The following code works perfectly, printing out: The price of this item is $(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 + "."
  }
}

But, if I switch the the last line around, the line is not printed at all:

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 + "."
}

Why must I write the line in the {} of the for in order to work. Doesn't the price variable's scope extend over the entire updatePrice function?

I'm still rather new to programming, so do forgive me if this is an elementary question.

Answer 1

It seems to me that it isn't printing because you are causing an error. Since array indexing starts at 0 your for loop should not use <= but rather < :

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

The reason why nothing gets printed then is because on the last loop the function errors and you setting the inner HTML never gets executed.