Скрипт калькулятора, не работает.
Помогите пожалуйста сделать калькулятор:
Сразу оговорю кое что - никогда не изучал яваскрипты, взял готовый который работал, попытался переделать под себя - не вышло. вот код скрипта: 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 полотен, одно выбираешь, все остальные дисейблить?
|
| Часовой пояс GMT +3, время: 14:25. |