Пишу калькулятор. Заступорился на простом вопросе.
Всем привет!
Пишу калькулятор. Структура его такова: вверху выбирается один из предложенных вариантов комплектации в виде картинок, обрамленных 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, время: 01:09. |