здравствуйте
Начал изучать 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">
<!-- 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>
