Скрипт калькулятора, не работает.
Помогите пожалуйста сделать калькулятор:
Сразу оговорю кое что - никогда не изучал яваскрипты, взял готовый который работал, попытался переделать под себя - не вышло. вот код скрипта:
function load()
{
window.status = "Made by Ville Leivo 15.07.2002"
}
function count()
{
//Цены на ручки
var ruch1price = 700;
var ruch2price = 1400;
//Условия для ручек
if (calc.ruch1.checked){
var wruch1 = document.calc.ruch1.value = ruch1price;
} else {
var wruch1 = document.calc.ruch1.value = 0;
}
if (calc.ruch2.checked){
var wruch2 = document.calc.ruch2.value = ruch2price;
} else {
var wruch2 = document.calc.ruch2.value = 0;
}
document.calc.pay.value = wruch1 + wruch2;
}
код html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Тест</title> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251'/> <script type="text/javascript" src="/js/z.js"></script> </head> <body> <table border="1" cellspacing="0" cellpadding="4"> <tr> <td width="610"> <b>Ручка один<br>ЦЕНА: 700 руб.</b> </td> <td width="15"><input name="ruch1" type="checkbox" value="on"></td> </tr> <tr> <td width="610"> <b>Ручка два<br>ЦЕНА: 1400 руб.</b> </td> <td width="15"><input name="ruch2" type="checkbox" value="on"></td> </tr> <table width="625" border="2" cellspacing="0" cellpadding="4"> <tr> <td align="right"> Цена: <input type="text" name="pay" size="10" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:8pt; letter-spacing=1px"> <input type="button" onClick="count()" value="Рассчитать" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:8pt; letter-spacing=1px"> <input type="reset" value="Очистить" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:8pt; letter-spacing=1px"> </td> </tr> </table> </body> </html> спасибо |
Цитата:
за вас делать вашу работу никто не станет |
Да я не прошу делать за меня мою работу, это единственный раз когда он мне понадобиться.
Я много чего читал прежде чем сюда написать. Более чем на 100% уверен что тут очень простая ошибка, именно из-за моего незнания языка. Но так же более чем на 100% уверен что указать как правильно сделать не отнимет у Вас (знающих людей) более 10 секунд! а по теме, мне просто не понять в чем разница! упростил скрипт в минимум:
function count()
{
var item1price = 700;
var item2price = 1400;
if (calc.item1.checked){
var witem1 = document.calc.item1.value = item1price;
} else {
var witem1 = document.calc.item1.value = 0;
}
if (calc.item2.checked){
var witem2 = document.calc.item2.value = item2price;
} else {
var witem2 = document.calc.item2.value = 0;
}
document.calc.pay.value = witem1 + witem2;
}
вот с этой хтмелкой работает: <HTML> <HEAD> <script src="test2.js"></script> </HEAD> <BODY> <form name="calc" method="POST"> <table width="450" border="0" cellpadding="3"> <tr> <td bgcolor="#eeeeee"><span class="normalText">Элемент 1.1</span></td> <td bgcolor="#eeeeee" align="right"> <input type="checkbox" name="item1" size="10" value="ON"></td> </tr> <tr> <td bgcolor="#eeeeee"><span class="normalText">Элемент 1.2</span></td> <td bgcolor="#eeeeee" align="right"> <input type="checkbox" name="item2" size="10" value="ON"></td> </tr> <tr> <td bgcolor="#cccccc" colspan="2" align="right"><span class="normalText">Price $</span><input type="text" name="pay" size="10" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:8pt; letter-spacing=1px"></td> </tr> <tr> <td bgcolor="#eeeeee" align="center"></td> <td bgcolor="#eeeeee" align="right"> <input type="button" onClick="count()" value="Рассчитать" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:8pt; letter-spacing=1px"> <input type="reset" value="Очистить" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:8pt; letter-spacing=1px"></td> </tr> </table> </form> <body> </html> а с этой(моей) нет: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Тест</title> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251'/> <script src="test2.js"></script> </head> <body> <form name="calc" method="POST"> <table border="1" cellspacing="0" cellpadding="4"> <tr> <td width="610"> <b>Ручка один<br>ЦЕНА: 700 руб.</b> </td> <td width="15"><input type="checkbox" name="item1" value="ON"></td> </tr> <tr> <td width="610"> <b>Ручка два<br>ЦЕНА: 1400 руб.</b> </td> <td width="15"><input type="checkbox" name="item2" value="ON"></td> </tr> <table width="625" border="2" cellspacing="0" cellpadding="4"> <tr> <td align="right"> Цена: <input type="text" name="pay" size="10" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:8pt; letter-spacing=1px"> <input type="button" onClick="count()" value="Рассчитать" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:8pt; letter-spacing=1px"> <input type="reset" value="Очистить" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:8pt; letter-spacing=1px"> </td> </tr> </table> </form> </body> </html> пишет: calc is not defined http://127.0.0.1/test/test2.js Line 6 но я не вижу разницы никакой. почему не работает??? |
mypaku,
Вот, можно сократить Ваш код, ибо у Вас много ненужных проверок, смысл в том, что если у Вас будет больше 10 чекбоксов пришлось бы каждое имя чекбокса прибавлять и проверять выбрано оно или нет , а так просто вписать в html инпут и дать ему его имя и сумму в value.
function Calc()
{
var pens=0;
var All=document.forms['calceR'];
for(var i = 0; i < All.elements.length; ++i) {
if(All.elements[i].checked){
pens = pens + parseInt(All.elements[i].value) ;
document.getElementById('result').innerHTML=pens+' руб.';
}
else document.getElementById('result').innerHTML=pens+' руб.';
}
}
<form name="calceR"> <table border="1" cellspacing="0" cellpadding="4" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; "> <tr> <td><b>Ручки по цене 700 руб.</b></td> <td><input name="pen" onclick="Calc()" type="checkbox" value="700"></td> </tr> <tr> <td><b>Ручки по цене 1400 руб.</b></td> <td><input name="pen1" type="checkbox" onclick="Calc()" value="1400"></td> </tr> <td>Итого:</td><td id="result" colspan="2" align="right">0 руб.</td> </table> </form> |
Спасибо огромное, очень все просто и легко.
Один вопрос, как бы результат выводить не в таблицу. а в поле для чисел(причем серенькое, заблакированное) а то пунктов у меня будет много, а кнопку ресет хочу поставить. |
mypaku,
Вот:
function Calc()
{
var pens=0;
var All=document.forms['calceR'];
for(var i = 0; i < All.elements.length; ++i)
{
if(All.elements[i].checked){
pens = pens + parseInt(All.elements[i].value) ;
document.calceR.res.value=pens+' руб.';} // здесь добавил вывод результата в форму
}
}
<form name="calceR"> <table border="1" cellspacing="0" cellpadding="4" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; "> <tr> <td><b>Ручки по цене 700 руб.</b></td> <td><input name="pen" type="checkbox" value="700"></td> </tr> <tr> <td><b>Ручки по цене 1400 руб.</b></td> <td><input name="pen1" type="checkbox" value="1400"></td> </tr> <tr> <td>Выполнить рассчёт:</td><td><input onclick="Calc()" type="button" value="расчитать"></td> </tr> <td>Итого:</td><td><input name="res" type="text" size="8" disabled="disabled" value="0"></td> <tr> <td>Стереть:</td><td><input type="reset" value="Удалить всё"></td> </tr> </table> </form> |
Вау спасибо! я не знаю что на этом форуме благодарность, потсавил плюсик!
Как я понял этих пенов можно создавать бесконечно просто добавляя номер? У меня планировался еще и выбор с помощью радио, а там когда меняешь имя( т.е они разные пены) то не получаеться группировки. как быть в таком случае? |
radio ставится в тех случаях, когда нужно выбрать одно или более вариантов из множества, например у вас акция: скидка 15% на 1 из 4 товаров, то есть не все 4 (не группу), а один, в таких случаях радио уместен.
|
Да я это понимаю, у меня просто ручки немного иные имель ввиду - дверные. но это не принципиально для основы скрипта. а в радио надо запихать полотна, так как 2 полотна в один проем не поставить. должен быть выбор.
либо же реализовать это путем дисейбла других чекбоксов, но я опять же не знаю как! Если подскажите буду при много благодарен. |
Допустим, 5 полотен, одно выбираешь, все остальные дисейблить?
|
ну у меня это было реализовано с помощью радио.
просто скрипт почему то не фурычил который я писал первым. С радио проще, но как я понимаю тспользую данную систему это не реально. я когда пытался разобраться с инпутом так и не понял ризницы между неймом и ид. думал что на id завязан выбор. Всего пунктов у меня гдето 50 из них 3 полотна которые были радио и 5 вариантов внутренней отделки. Вообще я хотел чтоб еще много что дисаблелось, есть не совместимые фирмы, но это так, мечта в идеале. Думал что яваскрипт более понятен, и смогу разобраться беря за основу готовые. |
mypaku,
Ну вот один выбор полотен (без дисейблов, например если человек выбирает полотно, все остальные полотна дисейблятся, а если он хочет изменить своё решение, то ему надо будет сбивать все выборы и заново их выбирать ) Код яваскрипта без изменений, а вот html изменён:
function Calc()
{
var pens=0;
var All=document.forms['calceR'];
for(var i = 0; i < All.elements.length; ++i) {
if(All.elements[i].checked){
pens = pens + parseInt(All.elements[i].value) ;
document.calceR.res.value=pens+' руб.';
}
}
}
<form name="calceR"> <table border="1" cellspacing="0" cellpadding="4" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; "> <tr> <td colspan="4" align="center"><b>Дверные ручки:</b></td> </tr> <tr> <td>Ручки по цене 700 руб.</td> <td><input name="pen" type="checkbox" value="700"></td> </tr> <tr> <td>Ручки по цене 1400 руб.</td> <td><input name="pen1" type="checkbox" value="1400"></td> </tr> <tr> <td colspan="4" align="center"><b>Выберите одно из полотен:</b></td> </tr> <tr> <td>Полотно 800 руб.</td><td><input type="radio" name="q1" value="800"></td> </tr> <tr> <td>Полотно 1000 руб.</td><td><input type="radio" name="q1" value="1000"></td> </tr <tr> <td>Полотно 1200 руб.</td><td><input type="radio" name="q1" value="1200"></td> </tr <tr> <td align="center" colspan="4"><b>Полотна с внутренней отделкой:</b></td> </tr> <tr> <td>Полотно 1400 руб.(внут. отделка)</td><td><input type="radio" name="q2" value="1400"></td> </tr> <tr> <td>Полотно 1600 руб.(внут. отделка)</td><td><input type="radio" name="q2" value="1600"></td> </tr <tr> <td>Полотно 1800 руб.(внут. отделка)</td><td><input type="radio" name="q2" value="1800"></td> </tr <tr> <td>Полотно 2000 руб.(внут. отделка)</td><td><input type="radio" name="q2" value="2000"></td> </tr <tr> <td>Полотно 2200 руб.(внут. отделка)</td><td><input type="radio" name="q2" value="2200"></td> </tr <tr> <td>Выполнить рассчёт:</td><td><input onclick="Calc()" type="button" value="расчитать"></td> </tr> <td>Итого:</td><td><input name="res" type="text" size="8" disabled="disabled" value="0"></td> <tr> <td>Стереть:</td><td><input type="reset" value="Удалить всё"></td> </tr> </table> </form> |
Так, хм... т.е это универсальный скрипт был? не важно было чтоб я называл pen, pen1, можно использовать было любое название?
я просто везде добавил в валуе цену, а названия у меня абсолютно разные и все работает. |
если вам надо выбрать чекбоксы, то имена обязаны быть разными(неважно pen или pen1, главное, чтобы вам было понятно), а если радио , то одинаковыми, например выбор одного из 3-х полотен, для 3 трёх радио три одинаковых имени "q1", если бы они были разными(имена), то 1 выбор из 3-х было бы невозможно выполнить, выбрались бы все три радио. Вот в чём дело. А для чекбоксов на разный товар - разное имя
|
Спасибо за разъяснение.
так как я не понимаю самого скрипта, то и не особо понимал что там происходит. я думал что там прописано что название должно быть pen с любой цифрой. Оказывается любое! это очень здорово! скрипт можно использовать как угодно и где угодно! Еще раз огромное спасибо, Вы мне очень помогли! |
mypaku,
Понимаете, в чём дело, что в этом скрипте можно вообще имена не использовать для чекбоксов, скрипт проверяет не имя , а выбран элемент или нет, если элемент выбран - суммировать его value, а для радио имя обязательно, ибо я обяъснял выше почему) |
Ах вот оно что!
Яваскрипт интересная вещь, жаль что я в свое время когда увлекался компьютером не пошел по этому пути, ну да ладно! Еще раз спасибо, отличный скрипт! |
mypaku,
:victory: |
| Часовой пояс GMT +3, время: 14:40. |