Javascript-форум - Помогите исправить код

здравствуйте

Начал изучать javascript пару месяцев назад. Пожалуйста, помогите мне исправить код. Это часть формы онлайн платежа. В зависимости от выбора, цена должна отображаться немедленно. Если пользователь выбирает другое - меняется и цена. Нет кнопки.

Я использовал только одну функцию. Данные (результат сумма ) поместил при помощи inner ИННЕРхтмл в таге <p>.

Но данные отображаются странно. Результат отображается как NaN, хотя я использовал ParseInt ... Потом, при выборе select4, результат отображается уже в цифрах...

(Я изолировал select3 поскольку с ним функция не работает)

Может ли кто-нибудь мне объяснить, где моя ошибка?

Спасибо!

************************************************** *******

<html>
<head>
<title>Buyer form </title>
<script langage="javascript" type="text/javascript">
function caclulatePrice()

{

var select1, select2, select3, select4, select5, totalPrice;
totalPrice = 0;

//select 1

select1 = parseInt(document.getElementById("firstProduct").v alue);
//alert(select1);

//select2
select2 = parseInt(document.getElementById("secondProduct"). value);
//alert(select2);

/*
//select3
select3 = parseInt(y);

for (var i=0; i < document.formSell.thirdProduct.length; i++)
{
if (document.formSell.thirdProduct[i].checked)
{
var y = document.formSell.thirdProduct[i].value;
}
}

*/

//select4
if (document.formSell.fourthProduct.checked == 1)
{
select4 = parseInt(document.getElementById("4-thProduct").value)
}

//select5
select5 = parseInt(document.getElementById("fifthProduct").v alue);
//alert(select5);

totalPrice = select1+select2+ select5 + select4;
document.getElementById("finalPrice").innerHTML = totalPrice;

return;
}
</script>
<style type="text/css">
body
{
background-color:grey;
}

#mainContent
{
background-color:#F2EDE4;
width: 80%;
margin: auto;
padding:10px;
}

#price
{
background-color:red;
color:white;
width: 860px;
margin: auto;
padding: 5px 20px 5px 20px;
/*text-decoration:blink;*/
font-size:14px;
font-weight:bold;
height: 50px;
}
</style>

</head>
<body>
<div id="mainContent">
<h2>Buyer </h2>

<form name="formSell">


<h4>First product:</h4> <br />
<select id="firstProduct" onchange="caclulatePrice()">
<option value="0">Choose!</option>
<option value="100">100$</option>
<option value="200">200$</option>
<option value="300">300$</option>
</select>
<br />


<h4>Second product:</h4> <br />
<select id="secondProduct" onchange="caclulatePrice()">
<option value="0">Choose!</option>
<option value="100">100$</option>
<option value="200">200$</option>
<option value="300">300$</option>
</select>
<br />


<h4>Third product</h4>
<br />
<input type="radio" name="thirdProduct" value="100" onblur="caclulatePrice()">3-th product for 100$<br>
<input type="radio" name="thirdProduct" value="200" onblur="caclulatePrice()">3-th product for 200$<br>


<br />
<h4>Fourth product, free, if total purchase exceed 800$ </h4>
<input type="checkbox" name="fourthProduct" id="4-thProduct" value="800" onchange="caclulatePrice()">Fourth product 800$<br>

<br />

<h4>The fifth element</h4>
<select multiple="multiple" id="fifthProduct" onchange="caclulatePrice()" >
<option value="0">Choose!</option>
<option value="100">fifth element 1 - 100$</option>
<option value="200">fifth element 2 - 200$</option>
<option value="300">fifth element 3 - 300$</option>

</select>

</form>

<div id="price">
<p> Final price <span id="finalPrice" value=""></span> </p>
</div>
</div>
</body>
</html>