extravert,
для начала id это нечто уникальное оно в нормальном случае не повторятся на странице. |
extravert,
:cray:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
function calc() {
var type_exp1 = document.getElementById("type_exp1");
var type_exp2 = document.getElementById("type_exp2");
var type_exp3 = document.getElementById("type_exp3");
var type_exp4 = document.getElementsByName('type_exp4');
var price = 0;
for (var i = 0; i < type_exp4.length; i++)
if (type_exp4[i].checked) {
price += +type_exp4[i].value;
}
document.getElementById("result_exp4").innerHTML = price;
//Result
var result = document.getElementById("result");
var price_exp1 = 0;
var price_exp2 = 0;
var price_exp3 = 0;
price_exp1 += (type_exp1.checked == true) ? parseInt(type_exp1.value) : 0;
price_exp2 += (type_exp2.checked == true) ? parseInt(type_exp2.value) : 0;
price_exp3 += (type_exp3.checked == true) ? parseInt(type_exp3.value) : 0;
price += price_exp1 + price_exp2 + price_exp3;
result_exp1.innerHTML = price_exp1;
result_exp2.innerHTML = price_exp2;
result_exp3.innerHTML = price_exp3;
result.innerHTML = price;
}
</script>
<table width="600">
<tr>
<td colspan="3" width="500">
<input type="checkbox" onchange="calc()" value="1500" id="type_exp1" />test1</td>
<td width="200"><span id="result_exp1">0</span> руб.</td>
</tr>
<tr>
<td colspan="3" width="500">
<input type="checkbox" onchange="calc()" value="1500" id="type_exp2" />test2</td>
<td width="200"><span id="result_exp2">0</span> руб.</td>
</tr>
<tr>
<td colspan="3" width="500">
<input type="checkbox" onchange="calc()" value="1500" id="type_exp3" />test3</td>
<td width="200"><span id="result_exp3">0</span> руб.</td>
</tr>
<tr>
<td width="200">
<input type="radio" onchange="calc()" value="1000" name="type_exp4" />test4</td>
<td width="200">
<input type="radio" onchange="calc()" value="1500" name="type_exp4" />test4</td>
<td width="200">
<input type="radio" onchange="calc()" value="2000" name="type_exp4" />test4</td>
<td width="200"><span id="result_exp4">0</span> руб.</td>
</tr>
<!-- Итог -->
<tr>
<td colspan="3" width="500" class="td_result">ИТОГО:</td>
<td class="td_result"><span id="result">0</span> руб.</td>
</tr>
</table>
</body>
</html>
|
рони, ох, матерь богов! с id я скосяпорила, спору нет, списываю на помутнение рассудка и усталость.
Спасибо, огромное, мне теперь стало многое понятно. Я не смогла бы дойти своими методами проб и ошибок. Правильный пример очень важен. Плохо, когда не знаешь, да и не помнишь ( |
мелочи конечно но может избавиться от таблицы все же в пользу дивов? :)
А по теме - не понял вопроса - что нужно то? Заменить чек боксы на радио чтоли? |
Kvark, может быть и стоит перейти на div. Версия пока рабочая, мне как-то с таблицей нагляднее что ли...
А тема была в том, чтобы в калькуляторе сделать и чекбоксы и радио, с этим мне уже помогли. И у меня сразу новый вопрос. Я хочу сделать дополнительную опцию для расчета, чтобы помимо рублей, он считал еще и время в отдельной строке, как "итого". Но что-то у меня не получается. Пробовала я так:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
function calc() {
var type_exp1 =
document.getElementById("type_exp1");
var type_exp2 =
document.getElementById("type_exp2");
var type_exp3 =
document.getElementById("type_exp3");
var type_exp4 =
document.getElementsByName('type_exp4');
var price = 0;
for (var i = 0; i <
type_exp4.length; i++)
if (type_exp4[i].checked) {
price += +type_exp4
[i].value;
}
document.getElementById
("result_exp4").innerHTML = price;
//Result
var result =
document.getElementById("result");
var price_exp1 = 0;
var price_exp2 = 0;
var price_exp3 = 0;
price_exp1 += (type_exp1.checked
== true) ? parseInt(type_exp1.value) : 0;
price_exp2 += (type_exp2.checked
== true) ? parseInt(type_exp2.value) : 0;
price_exp3 += (type_exp3.checked
== true) ? parseInt(type_exp3.value) : 0;
price += price_exp1 + price_exp2
+ price_exp3;
result_exp1.innerHTML =
price_exp1;
result_exp2.innerHTML =
price_exp2;
result_exp3.innerHTML =
price_exp3;
result.innerHTML = price;
}
function time() {
if (type_exp1.checked){
var time_exp1=parseFloat(time_exp1.value);
}
else time_exp1=0;
if (type_exp2.checked){
var time_exp2=parseFloat(time_exp2.value);
}
else time_exp2=0;
if (type_exp3.checked){
var time_exp3=parseFloat(time_exp3.value);
}
else time_exp3=0;
var time = time_exp1 + time_exp2 + time_exp3;
document.getElementById("result_time").innerHTML=time;
}
</script>
<table width="600">
<tr>
<td colspan="3" width="500">
<input type="checkbox"
onchange="calc()" value="1500" id="type_exp1"
/>test1</td>
<td width="200"><span
id="result_exp1">0</span> руб.</td>
<td width="200"><span
id="time_exp1" value="10" name="time_exp1">10</span> мин.</td>
</tr>
<tr>
<td colspan="3" width="500">
<input type="checkbox"
onchange="calc()" value="1500" id="type_exp2"
/>test2</td>
<td width="200"><span
id="result_exp2">0</span> руб.</td>
<td width="200"><span
id="time_exp2" value="15" name="time_exp2">15</span> мин.</td>
</tr>
<tr>
<td colspan="3" width="500">
<input type="checkbox"
onchange="calc()" value="1500" id="type_exp3"
/>test3</td>
<td width="200"><span
id="result_exp3">0</span> руб.</td>
<td width="200"><span
id="time_exp3" value="20" name="time_exp3">20</span> мин.</td>
</tr>
<tr>
<td width="200">
<input type="radio"
onchange="calc()" value="1000" name="type_exp4"
/>test4</td>
<td width="200">
<input type="radio"
onchange="calc()" value="1500" name="type_exp4"
/>test4</td>
<td width="200">
<input type="radio"
onchange="calc()" value="2000" name="type_exp4"
/>test4</td>
<td width="200"><span
id="result_exp4">0</span> руб.</td>
</tr>
<!-- Итог -->
<tr>
<td colspan="3" width="500"
class="td_result_time">ВРЕМЯ:</td>
<td class="td_time"><span
id="result_time">0</span> мин.</td>
</tr>
<tr>
<td colspan="3" width="500"
class="td_result">ИТОГО:</td>
<td class="td_result"><span
id="result">0</span> руб.</td>
</tr>
</table>
</body>
</html>
|
extravert,
1.есть такое понятие в javascript как видимость -- внутри функции time() невидно никаких type_exp1 потому что они в другой функции находятся calc()ю 2.время у вас в спане -- у него не value а innerHTML. 3вызова time нет нигде. вариант -- в time определить по новой переменные или поместить time во внутрь calc . :write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
function calc() {
var type_exp1 =
document.getElementById("type_exp1");
var type_exp2 =
document.getElementById("type_exp2");
var type_exp3 =
document.getElementById("type_exp3");
var type_exp4 =
document.getElementsByName('type_exp4');
var price = 0;
for (var i = 0; i <
type_exp4.length; i++)
if (type_exp4[i].checked) {
price += +type_exp4
[i].value;
}
document.getElementById
("result_exp4").innerHTML = price;
//Result
var result =
document.getElementById("result");
var price_exp1 = 0;
var price_exp2 = 0;
var price_exp3 = 0;
price_exp1 += (type_exp1.checked
== true) ? parseInt(type_exp1.value) : 0;
price_exp2 += (type_exp2.checked
== true) ? parseInt(type_exp2.value) : 0;
price_exp3 += (type_exp3.checked
== true) ? parseInt(type_exp3.value) : 0;
price += price_exp1 + price_exp2
+ price_exp3;
result_exp1.innerHTML =
price_exp1;
result_exp2.innerHTML =
price_exp2;
result_exp3.innerHTML =
price_exp3;
result.innerHTML = price;
function time() {
var time_exp1 = document.getElementById("time_exp1");
var time_exp2 = document.getElementById("time_exp2");
var time_exp3 = document.getElementById("time_exp3");
if (type_exp1.checked) {
time_exp1 = parseFloat(time_exp1.innerHTML);
} else time_exp1 = 0;
if (type_exp2.checked) {
time_exp2 = parseFloat(time_exp2.innerHTML);
} else time_exp2 = 0;
if (type_exp3.checked) {
time_exp3 = parseFloat(time_exp3.innerHTML);
} else time_exp3 = 0;
var time = time_exp1 + time_exp2 + time_exp3;
document.getElementById("result_time").innerHTML = time;
}
time()
}
</script>
<table width="600">
<tr>
<td colspan="3" width="500">
<input type="checkbox" onchange="calc()" value="1500" id="type_exp1" />test1</td>
<td width="200"><span id="result_exp1">0</span> руб.</td>
<td width="200"><span id="time_exp1" value="10" name="time_exp1">10</span> мин.</td>
</tr>
<tr>
<td colspan="3" width="500">
<input type="checkbox" onchange="calc()" value="1500" id="type_exp2" />test2</td>
<td width="200"><span id="result_exp2">0</span> руб.</td>
<td width="200"><span id="time_exp2" value="15" name="time_exp2">15</span> мин.</td>
</tr>
<tr>
<td colspan="3" width="500">
<input type="checkbox" onchange="calc()" value="1500" id="type_exp3" />test3</td>
<td width="200"><span id="result_exp3">0</span> руб.</td>
<td width="200"><span id="time_exp3" value="20" name="time_exp3">20</span> мин.</td>
</tr>
<tr>
<td width="200">
<input type="radio" onchange="calc()" value="1000" name="type_exp4" />test4</td>
<td width="200">
<input type="radio" onchange="calc()" value="1500" name="type_exp4" />test4</td>
<td width="200">
<input type="radio" onchange="calc()" value="2000" name="type_exp4" />test4</td>
<td width="200"><span id="result_exp4">0</span> руб.</td>
</tr>
<!-- Итог -->
<tr>
<td colspan="3" width="500" class="td_result_time">ВРЕМЯ:</td>
<td class="td_time"><span id="result_time">0</span> мин.</td>
</tr>
<tr>
<td colspan="3" width="500" class="td_result">ИТОГО:</td>
<td class="td_result"><span id="result">0</span> руб.</td>
</tr>
</table>
</body>
</html>
|
рони, спасибо! сейчас тоже разбиралась сама, переместила time в calc(), вроде заработало, но где-то была ошибка. Показывалось NaN мин. Пока разбиралась, вы мне ответили. Сейчас сверюсь, где я сглупила.
Спасибо огромное, еще раз! Вы мне так помогаете ) |
Цитата:
Цитата:
|
Да уж, поначалу легко запутаться :-? но я стараюсь)
|
Переделала код
У меня еще вопрос. Как сделать зависимость всех элементов друг от друга. У меня 2 блока радио, время и количество, и много чекбоксов. Нужно сделать вывод суммы в зависимости от параметров время-колво. Т.е. если выбрано 30 мин и 5 человек, то сумма 1000р., 60 мин и 15 чел. - 1500р. и т.д. Но также от этого изменялась цена и у чекбоксов.
Я было попробовала вариант, но это совсем коряво и неудобно.
if (vremia1.checked && chel1.checked){
type_vremia = 333;
} else
if (vremia1.checked && chel2.checked) {
type_vremia = 444;
} else
if (vremia1.checked && chel3.checked) {
type_vremia = 555;
} ;
Как это правильно организовать? Попробовала так, вроде работает. Сделала привязку только к параметру количество (в принципе так и надо было) price_exp1 += (type_exp1.checked == true && chel1.checked) ? parseInt(type_exp1.value) : 0; price_exp1 += (type_exp1.checked == true && chel2.checked) ? parseInt(type_exp1.value)*2 : 0 ; price_exp1 += (type_exp1.checked == true && chel3.checked) ? parseInt(type_exp1.value)*3 : 0 ; Этот вариант вобщем подходит, т.к. чекбоксов у меня немного. А вот если бы много было, так же прописывать к каждому не очень удобно и громоздко. Просто интересуюсь, какими способами их можно обобщить в одно правило? |
| Часовой пояс GMT +3, время: 01:58. |