Пишу калькулятор. Заступорился на простом вопросе.

[DorianLeroy]

Всем привет!

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

[ksa]

Как вариант...

<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>

[DorianLeroy]

Спасибо, очень полезный для моего начального уровня вариант

[popov654]

Почему бы не понавешать onclick на каждый из DIV-ов? Да, так меньше HTML-кода, но зато JavaScript код сложнее.
Единственный плюс - можно через родителя получить доступ у стилям каждого DIV-а и поменять классы неактивных DIV-ов... Но кто мешает сделать это через obj.parent?
В общем дело вкуса)