forms - innerHTML not working inside event handler function (Javascript) -

i have created function, updateprice, have tied "click" event on checkbox , radio buttons in html form. each checkbox , radio represents item, it's price value property of these <input> elements. when check or uncheck box, function fires, loops through elements in form, , updates total price of checked items div element have below form, id tag "priceoutput".

the following code works perfectly, printing out: price of item $(price of item).

function updateprice() {   var price = 0   (i=0;i<=form.length;i++) {     var element = form[i]     if(element.checked) {       price+=parseint(element.value)     }     document.getelementbyid("priceoutput").innerhtml = "the price of item $" + price + "."   } } 

but, if switch the last line around, line not printed @ all:

function updateprice() {   var price = 0   (i=0;i<=form.length;i++) {     var element = form[i]     if(element.checked) {       price+=parseint(element.value)     }   }     document.getelementbyid("priceoutput").innerhtml = "the price of item $" + price + "." } 

why must write line in {} of in order work. doesn't price variable's scope extend on entire updateprice function?

i'm still rather new programming, forgive me if elementary question.

it seems me isn't printing because causing error. since array indexing starts @ 0 loop should not use <= rather < :

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

the reason why nothing gets printed because on last loop function errors , setting inner html never gets executed.