Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.11.2012, 16:16
Новичок на форуме
Отправить личное сообщение для bytzz Посмотреть профиль Найти все сообщения от bytzz
 
Регистрация: 14.09.2012
Сообщений: 1

Помогите исправить код
здравствуйте

Начал изучать 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>
Ответить с цитированием
  #2 (permalink)  
Старый 02.11.2012, 21:45
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

bytzz, лучше всего все переменные selectX объявить изначально равные 0...
так например, если не установлен checkbox-переключатель 4-thProduct, то select4 будет = undefined...
fifthProduct у вас выступает в качестве select-списка с множественным выбором, соответственно
Цитата:
Чтобы в случае с множественным выбором элементов найти все выделенные элементы нужно перебрать в цикле все элементы массива options и проверить их свойство selected, которое равно true у выделенных элементов
у тега span нету атрибута value
у тега script атрибут называется language, а не langage
по поводу select3 пробегитесь по всем radio-переключателем как-то так:
var rad = document.getElementsByName("thirdProduct"), y = 0;
for (i = 0; i < rad.length; i++) {
    if (rad[i].checked) { y = rad[i].value; break; }
}

учебник вам однозначно требуется почитать...

Последний раз редактировалось lord2kim, 02.11.2012 в 21:54.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите исправить функцию поиска слова opeen_door Общие вопросы Javascript 3 31.10.2011 19:44
помогите начинающему оптимизироват код bookin jQuery 0 19.10.2011 14:10
Код калькулятора на JS. помогите с ошибкой! kirill.psl Общие вопросы Javascript 9 26.08.2010 10:38
Помогите довести код до ума krol Элементы интерфейса 4 09.08.2010 00:50
Помогите оптимизировать код. pizzZ jQuery 5 17.11.2009 22:52