Hi guys!
Please help me write correct code below.

I wrote it but but something goes wrong and I'm already lost!

It is part of an online payment form. Depending on your choice, the price must be displayed immediately. If the user changes selection - price will change too. Not buttons. Only events.


I used only one tool to recover data value. I used innerHTML to place data into a span tag.

But I displays NaN, although I used parseInt ...


Can anyone explain where I'm wrong?

Thanks!

(I isolated select3 because the function does not work )
<!-- -->




<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").value);
//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").value);
//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">


<!-- select1 -->
<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 />

<!-- select2 -->
<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 />



<!-- select3 -->
<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>

<!-- select4 -->
<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 />
<!-- select5 -->
<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>