Пишу калькулятор. Заступорился на простом вопросе.
Всем привет!
Пишу калькулятор. Структура его такова: вверху выбирается один из предложенных вариантов комплектации в виде картинок, обрамленных div'ами, с ценами. А ниже дополнительное оборудование списком в виде чекбоксов с ценами, обрамленных тегом form. Логика калькулятора следующая: Мы смотрим был ли клик на одном из div, если был, то запоминаем цену, прописанную в этом div. Далее реагируем на клики по чекбоксам, если клик был, то заносим цену в переменную. Это выглядит так. <div id=1 value="23000"> <img src="1.jpg"></div> <div id=2 value="34000"> <img src="2.jpg"></div> <div id=3 value="65000"> <img src="3.jpg"></div> <form onclick="price(this)"> <input type="checkbox" name="zap1" value="10000" /> <input type="checkbox" name="zap2" value="20000" /> <input type="checkbox" name="zap3" value="50000" /> </form> function price(form){ if (form.zap1.checked){ var zap1=parseFloat(form.zap1.value); } else zap1=0; ...//остальное допоборудование var total=zap1+zap2+zap3; document.getElementById("goldsum").innerHTML=total; } То есть пока функция реагирует только на клик по чекбоксам. Мне нужно чтобы в total запоминался value из div при клике по одному из них. Как это сделать? |
Как вариант...
<script type="text/javascript"> function Get() { var os=event.target||event.srcElement var o=document.getElementById('container').getElementsByTagName('div') var i for (i=0; i<o.length; i++) { o[i].className='' } os.parentNode.className='Ok' } function price(form) { var o=document.getElementById('container').getElementsByTagName('div') var i var id for (i=0; i<o.length; i++) { if (o[i].className=='Ok') { id=o[i].id break } } i=document.getElementById(id).getAttribute('value') alert(i) } </script> <div id='container' onclick='Get()'> <div id='1' value="23000"> <img src="http://javascript.ru/forum/images/smilies/smile.gif" /></div> <div id='2' value="34000"> <img src="http://javascript.ru/forum/images/smilies/wink.gif" /></div> <div id='3' value="65000"> <img src="http://javascript.ru/forum/images/smilies/blink.gif" /></div> </div> <form onclick="price(this)"> <input type="checkbox" name="zap1" value="10000" /> <input type="checkbox" name="zap2" value="20000" /> <input type="checkbox" name="zap3" value="50000" /> </form> |
Спасибо, очень полезный для моего начального уровня вариант
|
Почему бы не понавешать onclick на каждый из DIV-ов? Да, так меньше HTML-кода, но зато JavaScript код сложнее.
Единственный плюс - можно через родителя получить доступ у стилям каждого DIV-а и поменять классы неактивных DIV-ов... Но кто мешает сделать это через obj.parent? :) В общем дело вкуса) |
Часовой пояс GMT +3, время: 21:08. |