| extravert | 13.06.2013 20:46 |
рони, вот такая таблица :)
а вот так, я хочу, чтобы получилось
а вот так, я хочу, чтобы получилось
Нужна помощь с калькулятором
Здравствуйте, я совсем новичок, пытаюсь разбираться в js.
Проблема такая, нужно в простой калькулятор с чекбоксами добавить 2 группы radio, так, чтобы у каждой группы был свой value, и они прибавлялись бы к общей сумме. По отдельности все работает, я только не знаю, как их соединить. Буду рада любой помощи.
<SCRIPT LANGUAGE="JavaScript">
function getRadioGroupValue(radioGroupObj)
{
var val = 0;
for (var i=0; i < radioGroupObj.length; i++)
if (radioGroupObj[i].checked){
val+=+radioGroupObj[i].value;
}
var total=1000+val;
document.getElementById("result").innerHTML=total;
}
function price(form) {
if (form.exp1.checked){
var exp1=parseFloat(form.exp1.value);
}
else exp1=0;
if (form.exp2.checked){
var exp2=parseFloat(form.exp2.value);
}
else exp2=0;
if (form.exp3.checked){
var exp3=parseFloat(form.exp3.value);
}
else exp3=0;
var total=exp1+exp2+exp3;
document.getElementById("total_price").innerHTML=total;
}
</SCRIPT><center>
<form name="form" onclick="price(this)">
<table width="350" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td align="center" colspan="5"><b>Список</b></td>
</tr>
<tr>
<td> </td>
<td align="left" colspan="3"><input type="checkbox" value="6000" name="exp1">Тест 1</td>
<td>- 6000</td>
</tr>
<tr>
<td> </td>
<td align="left" colspan="3"><input type="checkbox" value="8000" name="exp2">Тест 2</td>
<td>- 8000</td>
</tr>
<tr>
<td> </td>
<td align="left" colspan="3"><input type="checkbox" value="12000" name="exp3">Тест 3</td>
<td>- 12000</td>
</tr>
<form name="radioForm" onclick="getRadioGroupValue(this)">
<tr>
<td align="left" colspan="4"> <b>Время</b></td>
<td> </td>
<tr>
<td> </td>
<td align="left"><input type="radio" name="group1" value="1">z</td>
<td><input type="radio" name="group1" value="2">a</td>
<td><input type="radio" name="group1" value="3">b</td>
<td>
<div id="result">0</div>
</td>
</tr><br>
<td align="left" colspan="4"> <b>Количество</b></td>
<td> </td>
<tr>
<td> </td>
<td align="left"><input type="radio" name="group2" value="1">z</td>
<td><input type="radio" name="group2" value="2">a</td>
<td><input type="radio" name="group2" value="3">b</td>
<td>
<div id="result">0</div>
</td>
</tr>
</form>
<tr>
<td> </td>
<td align="center" colspan="3"><input type="button" value="заказать" onclick="tf1.style.display = 'inline';"> <b>Итого:</b></td>
<td align="center" id="total_price" style="color: #993300;font-weight:bold; font-size:14px">0</td>
</tr>
</tbody>
</table>
</form>
</center>
|
Цитата:
|
Я взяла два разных кода, один от обычного простого калькулятора с чекбоксами, другой от калькулятора с радио, и пытаюсь добавить блоки radio в свой готовый калькулятор. Простите мою косноязычность, надеюсь, объяснила.
|
Цитата:
Цитата:
А просто копировать какие-то куски - это не есть "разбираться"... |
К сожалению, до самостоятельного написания мне еще далеко. Пока смотрю, как другие пишут и стараюсь вникнуть.
|
extravert, твоя задачка букварская... На них и учатся что-то делать. Т.ч. самое время начать. ;)
|
ksa, ну подсказка бы не помешала, а то у меня уже ступор начался и ощущение собственного дуболомства (
|
Цитата:
Цитата:
|
Попробовала сама. Объясните, пожалуйста, где моя ошибка.
<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.getElementById("type_exp4");
for (var i=0; i < type_exp4.length; i++)
if (type_exp4[i].checked){
type_exp4+=+type_exp4[i].value;
}
var price_exp4= type_exp4;
document.getElementById("result_exp4").innerHTML=price_exp4;
//Result
var result = document.getElementById("result");
var price_exp1 = 0;
var price_exp2 = 0;
var price_exp3 = 0;
var price_exp4 = 0;
var price = 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_exp4 += (type_exp4.checked == true) ? parseInt(type_exp4.value) : 0;
price= price_exp1 + price_exp2 + price_exp3 + price_exp4;
result_exp1.innerHTML = price_exp1;
result_exp2.innerHTML = price_exp2;
result_exp3.innerHTML = price_exp3;
result_exp4.innerHTML = price_exp4;
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="1500" name="type_exp4" id="type_exp4" />test4</td>
<td width="200"><input type="radio" onchange="calc()" value="1500" name="type_exp4" id="type_exp4" />test4</td>
<td width="200"><input type="radio" onchange="calc()" value="1500" name="type_exp4" id="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>
|
Ребята, ну что же вы! Помогите нубу, пожалуйста!
|
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 ; Этот вариант вобщем подходит, т.к. чекбоксов у меня немного. А вот если бы много было, так же прописывать к каждому не очень удобно и громоздко. Просто интересуюсь, какими способами их можно обобщить в одно правило? |
extravert,
Вариант...через селекторы
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<script>
window.onload = function () {
var data = {
'time': ['30 мин.', '60 мин.', '120 мин.'],
'sum': [1000, 2000, 4000]
},
men = {
'number': ['5 чел.', '10 чел.', '15 чел.', '20 чел.'],
'ratio': [1, .9, .75, .6]
}
function set_select(name, arr_text, arr_val) {
var select = document.getElementsByName(name)[0];
select.options.length = 0;
for (var k = 0; k < arr_val.length; k++) {
select.options[k] = new Option(arr_text[k], arr_val[k]);
}
}
var t = document.getElementsByName('time')[0],
m = document.getElementsByName('men')[0];
function change_select() {
document.getElementsByTagName('span')[0].innerHTML = t.value * m.value + " руб."
}
set_select('time', data['time'], data['sum'])
set_select('men', men['number'], men['ratio'])
change_select()
t.addEventListener('change', change_select);
m.addEventListener('change', change_select);
}
</script>
</head>
<body>
<select name="time">
</select>
<select name="men">
</select>
<span></span>
</body>
</html>
|
Да, наверное, с селекторами было бы лучше, но задача изначально стоит оформить это через радио. Вот с ними у меня как раз и не получается. Мне нужно, чтобы в выводе "время" был коэффициент, в зависимости от количества участников. А в участниках цену, я думаю, вообще бы убрать для вывода. Пока что не получается. Вот такой код имею сейчас.
<script type="text/javascript">
function calc() {
var type_exp1 = document.getElementById("type_exp1");
var type_exp2 = document.getElementById("type_exp2");
var type_vremia = document.getElementsByName('type_vremia');
var prices = 0;
for (var i = 0; i < type_vremia.length; i++)
if (type_vremia[i].checked) {
prices += +type_vremia[i].value;
}
document.getElementById("result_vremia").innerHTML = prices;
var type_kolichestvo = document.getElementsByName('type_kolichestvo');
var price = 0;
for (var i = 0; i < type_kolichestvo.length; i++)
if (type_kolichestvo[i].checked) {
price += +type_kolichestvo[i].value;
}
document.getElementById ("result_kolichestvo").innerHTML = price;
//Result
var result = document.getElementById("result");
var price_exp1 = 0;
var price_exp2 = 0;
prices += (vremia1.checked == true && chel1.checked) ? parseInt(vremia1.value) : 0;
prices += (vremia1.checked == true && chel2.checked) ? parseInt(vremia1.value)*2 : 0;
prices += (vremia1.checked == true && chel3.checked) ? parseInt(vremia1.value)*3 : 0;
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 ;
price_exp2 += (type_exp2.checked == true && chel1.checked) ? parseInt(type_exp2.value) : 0;
price_exp2 += (type_exp2.checked == true && chel2.checked) ? parseInt(type_exp2.value)*2 : 0 ;
price_exp2 += (type_exp2.checked == true && chel3.checked) ? parseInt(type_exp2.value)*3 : 0 ;
price += price_exp1 + price_exp2 + prices;
result_exp1.innerHTML = price_exp1;
result_exp2.innerHTML = price_exp2;
result.innerHTML = price;
}
</script>
<table width="640">
<tbody>
<tr>
<td colspan="4"><span>ПРОДОЛЖИТЕЛЬНОСТЬ:</span></td>
</tr>
<tr>
<td width="100">
<div class="radio"><input type="radio" onchange="calc()" value="4500" name="type_vremia" id="vremia1" checked="checked"><label for="vremia1">30 минут</label></div>
</td>
<td width="100">
<div class="radio"><input type="radio" id="vremia2" name="type_vremia" value="5500" onchange="calc()"><label for="vremia2">60 минут</label></div>
</td>
<td width="100">
<div class="radio"><input type="radio" onchange="calc()" value="6500" name="type_vremia" id="vremia3"><label for="vremia3">90 минут</label></div>
</td>
<td "width="70"><span id="result_vremia">0</span> руб.</td>
</tr>
<tr>
<td colspan="4"><span>КОЛИЧЕСТВО УЧАСТНИКОВ:</span></td>
</tr>
<tr>
<td width="100"><div class="radio"><input type="radio" onchange="calc()" value="1000" name="type_kolichestvo" id="chel1" checked="checked" ><label for="chel1">5 человек</label></div></td>
<td width="100"><div class="radio"><input type="radio" id="chel2" name="type_kolichestvo" value="1500" onchange="calc()"><label for="chel2">10 человек</label></div></td>
<td width="100"><div class="radio"><input type="radio" onchange="calc()" value="2000" name="type_kolichestvo" id="chel3"><label for="chel3">15 человек</label></div></td>
<td "width="70"><span id="result_kolichestvo">0</span> руб.</td>
</tr>
<tr>
<td colspan="4"><span>СПИСОК:</span></td>
</tr>
<tr>
<td colspan="3"><div class="checkbox"><input type="checkbox" id="type_exp1" value="1000" onchange="calc()" name="check"><label for="type_exp1">111</label></div>
</td>
<td width="70"><span id="result_exp1">0</span> руб.</td>
</tr>
<tr>
<td colspan="3"><div class="checkbox"><input type="checkbox" onchange="calc()" value="1000" id="type_exp2" name="check"><label for="type_exp2">222</label></div>
</td>
<td width="70"><span id="result_exp2">0</span> руб.</td>
</tr>
<!-- Итог -->
<tr>
<td class="td_result" colspan="3"><span>ОБЩАЯ СТОИМОСТЬ:</span></td>
<td width="100" class="td_result"><span id="result">0</span><span> руб.</span></td>
<td> </td>
</tr>
</tr>
</table>
|
extravert,
составьте сначала таблицу или три строки с результатами время/чел 5 10 15 30 60 90 чтобы знать что вы хотите |
рони, вот такая таблица :)
а вот так, я хочу, чтобы получилось |
extravert,
:cray:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
span{
position: relative;
left: 300px
}
p {
width: 300px;
text-align: center;
}
</style>
</head>
<body>
<div id="show" >
<p>ПРОДОЛЖИТЕЛЬНОСТЬ:</p>
<label><input name="time" type="radio" value="30" checked="checked">30 мин.</label>
<label><input name="time" type="radio" value="60">60 мин.</label>
<label><input name="time" type="radio" value="90">90 мин.</label>
<p>КОЛИЧЕСТВО УЧАСТНИКОВ:</p>
<label><input name="men" type="radio" value="0" checked="checked">5 чел.</label>
<label><input name="men" type="radio" value="1">10 чел.</label>
<label><input name="men" type="radio" value="2">15 чел.</label><br>
<span id="result0">0 руб.</span>
<p>СПИСОК:</p>
<label><input name="exp1" type="checkbox" value="3000">111</label>
<span id="result1">0 руб.</span>
<br>
<label><input name="exp2" type="checkbox" value="1000">222</label>
<span id="result2">0 руб.</span>
<p>ОБЩАЯ СТОИМОСТЬ:</p>
<span id="result3">0 руб.</span>
</div>
<script>
function check(name)
{
var name = document.getElementsByName(name);
for (var i = 0; i < name.length; i++)
if (name[i].checked) return +name[i].value;
return 0
}
function id(n)
{
return document.getElementById('result'+n)
}
function calc()
{
var sum = {
'30':[1000,2000,3000],
'60':[1500,3000,4500],
'90':[2000,4000,6000]
}
var rez = sum[check('time')][check('men')];
id(0).innerHTML = rez+" руб.";
var exp = check('exp1');
id(1).innerHTML = exp+" руб.";
rez += exp;
exp = check('exp2');
rez += exp;
id(2).innerHTML = exp+" руб.";
id(3).innerHTML = rez+" руб.";
}
var div = document.getElementById('show');
div.addEventListener('click', calc);
calc()
</script>
</body>
</html>
|
рони, ого! я такого пока не знаю... думала тут можно обойтись простыми способами... Спасибо большое, сейчас буду разбираться, что тут почем) Ночь еще молода)
|
Я, конечно, понимаю, что уже надоела, но у меня возник еще вопрос :)
Моему калькулятору потребовалось выезжать за город, и в связи с этим, я решила сделать селекторы такого плана. <p>МЕСТО ПРОВЕДЕНИЯ:</p> <label><input name="km" type="radio" value="0" checked="checked">В городе</label> <label><input name="km" type="radio" value="0">За городом</label> <label><select id="type"> <option disabled selected>удаленность</option> <option value="10">10 км.</option> <option value="20">15 км.</option> </select></label><br> <span id="result_km">0 руб.</span> И чтобы при выборе опции, автоматически включался его радио. А в функцию это прописать у меня не хватает знаний. Может подскажете как?
{
var km = document.getElementsByName('km');
var dalnost = 0;
for (var i = 0; i < km.length; i++)
if (km[i].checked) {
dalnost += +km[i].value;
}
document.getElementById("result_km").innerHTML = dalnost+" руб.";
}
|
extravert,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
span{
position: relative;
left: 300px
}
p {
width: 300px;
text-align: center;
}
</style>
</head>
<body>
<div id="show" >
<p>ПРОДОЛЖИТЕЛЬНОСТЬ:</p>
<label><input name="time" type="radio" value="30" checked="checked">30 мин.</label>
<label><input name="time" type="radio" value="60">60 мин.</label>
<label><input name="time" type="radio" value="90">90 мин.</label>
<p>КОЛИЧЕСТВО УЧАСТНИКОВ:</p>
<label><input name="men" type="radio" value="0" checked="checked">5 чел.</label>
<label><input name="men" type="radio" value="1">10 чел.</label>
<label><input name="men" type="radio" value="2">15 чел.</label><br>
<span id="result0">0 руб.</span>
<p>СПИСОК:</p>
<label><input name="exp1" type="checkbox" value="3000">111</label>
<span id="result1">0 руб.</span>
<br>
<label><input name="exp2" type="checkbox" value="1000">222</label>
<span id="result2">0 руб.</span>
<p>МЕСТО ПРОВЕДЕНИЯ:</p>
<label><input name="km" type="radio" value="0" checked="checked">В городе</label>
<label><input name="km" type="radio" value="1">За городом</label>
<p>УДАЛЁННОСТЬ:</p>
<select id="path">
<option value="10">10 км.</option>
<option value="20">15 км.</option>
</select>
<span id="result3">0 руб.</span>
<p>ОБЩАЯ СТОИМОСТЬ:</p>
<span id="result4">0 руб.</span>
</div>
<script>
function check(name)
{
var name = document.getElementsByName(name);
for (var i = 0; i < name.length; i++)
if (name[i].checked) return +name[i].value;
return 0
}
function id(n)
{
return document.getElementById('result'+n)
}
var div = document.getElementById('show');
var sel = document.getElementById('path');
function calc()
{
var sum = {
'30':[1000,2000,3000],
'60':[1500,3000,4500],
'90':[2000,4000,6000]
}
var rez = sum[check('time')][check('men')];
id(0).innerHTML = rez+" руб.";
var exp = check('exp1');
id(1).innerHTML = exp+" руб.";
rez += exp;
exp = check('exp2');
rez += exp;
id(2).innerHTML = exp+" руб.";
exp = 0;
if(check('km')) {
exp = +sel.value
}
id(3).innerHTML = exp+" руб.";
rez += exp;
id(4).innerHTML = rez+" руб.";
}
div.addEventListener('click', calc);
sel.addEventListener('change', calc);
calc()
</script>
</body>
</html>
|
рони,
спасибо огромное! все получилось! ) |
| Часовой пояс GMT +3, время: 05:06. |