Javascript returns Nan in IE, FF ok

Question

im very new to javascript, and writing this script to add up a shopping cart and print out subtotals and totals. it works in FF but not in IE. this function is called by onclick of one of three select options with a value of 0-25. it is in a js file called in the head. what it does is get the selected values as variables, parseint them, adds and multiplies, and changes the innerHTML of the table to reflect the subtotals, and total. FF does it great, but IE gives Nan. ive tried rewriting it a number of different ways, and many translations still work in FF but not IE8. ive made sure the variables and form id's arent repeated.

function gen_invoice() {
    var scount = parseInt(document.shopcart.studentcount.value, 10);
    var ycount = parseInt(document.shopcart.youthcount.value, 10);
    var fcount = parseInt(document.shopcart.facultycount.value, 10);

    //html output source is 3 selects like this, with diff ids and names: 
    //<select name="studentcount" id="studentcount">  
    //<option onclick="gen_invoice()" value="0">0 </option></select>
    var cardcost = parseInt(document.shopcart.cardprice.value, 10);

    //cardcost comes from hidden input value: 
    //<input type="hidden" id="cardprice" name="cardprice" value="25">
    var totalsum = scount + ycount + fcount;

    var grandtotal = totalsum * cardcost;

    document.getElementById('s_price').innerHTML = scount * cardcost;
    document.getElementById('y_price').innerHTML = ycount * cardcost;
    document.getElementById('f_price').innerHTML = fcount * cardcost;
    document.getElementById('grand').innerHTML = grandtotal;
    //....
}

...after this there are 3 long loops for writing out some other forms, but they dont work in IE either because they depend on the selected values to be an integer. this part happens first and returns Nan, so im sure the problem is here somwhere. I have literally hit my head on the table over this. You can imagine how frustrating it is to be able to write the entire rest of the site beautifully, but then fail at adding 3 numbers together. help please!

Answer 1

innerHTML expects string objects, not numbers. Try add ' ' (space) after numeric expression.

like: ....innerHTML = (count * cardcost) + "";

Answer 2

You might have better luck with accessing the forms elements using

• document.getElementById("foo")
• document.forms.shopcart.elements.cardprice

Both these are better approaches than what you are doing now.