JS калькулятор value c нескольких групп radio

[Round]

Требуется помощь.

Пытаюсь разобраться в js и начал изучать совсем недавно.

Нужно написать простой калькулятор который будет суммировать value из разных групп radio и выводить в документ "на лету" - определяя checked кнопок.

Условие - кнопки в форму подгружаются динамически в процессе onload страницы, и их количество может быть разным, как и количество групп кнопок может быт разным.

Что то подобное видел на сайте apple на странице выбора конфигурации гаджета.

Написал простенькую форму и попытался к ней написать скрипт, но так ничего и не заработало.

Вот то что лежит в body...

<div>калькулятор</div><br/> 

<form name="radioForm" onclick="getRadioGroupValue(this)">

<input type="radio" name="group1" value="0">z<br>
<input type="radio" name="group1" value="1">a<br>
<input type="radio" name="group1" value="2">b<br>
<input type="radio" name="group1" value="3">c<br>
<input type="radio" name="group1" value="4">d<br>
<br>
<input type="radio" name="group2" value="10">d<br>
<input type="radio" name="group2" value="20">f<br>
<input type="radio" name="group2" value="30">g<br>
<input type="radio" name="group2" value="40">h<br>
<br>
</form>

<SCRIPT LANGUAGE="JavaScript"> 
function getRadioGroupValue(radioGroupObj)
{
  for (var i=0; i < radioGroupObj.length; i++)
    if (radioGroupObj[i].checked) return radioGroupObj[i].value;

  return null;

var v1 = getRadioGroupValue(document.radioForm.group1);

var v2 = getRadioGroupValue(document.radioForm.group2);

var total= 1000+v1+v2;
  
document.getElementById("result").innerHTML=total;
}
</SCRIPT> 

<div id="result">0</div>

Прошу ткнуть в ошибку и разьяснить - что именно напутал.

[T-sh]

function getRadioGroupValue(radioGroupObj)
{
var val = 0;
  for (var i=0; i < radioGroupObj.length; i++)
    if (radioGroupObj[i].checked){ 
	       val+=+radioGroupObj[i].value;
	}
 
var total= 1000+val;
document.getElementById("result").innerHTML=total;
}

[Round]

T-sh, спасибо за подсказку..., да так намного эстетичнее, и всё работает.

Вот если бы вы ещё растолковали новичку, почему мой код не работал?... это поможет мне понять где хромает моя логика.

[T-sh]

T-sh, спасибо за подсказку..., да так намного эстетичнее, и всё работает.

Вот если бы вы ещё растолковали новичку, почему мой код не работал?... это поможет мне понять где хромает моя логика.

вот здесь:

for (var i=0; i < radioGroupObj.length; i++)
    if (radioGroupObj[i].checked) return radioGroupObj[i].value;
...

в цикле, после найденного выбранного радиобокса возвращается его значение, только возвращается оно не в переменную, и не в память, а непонятно куда, а потом вы объявляете переменные v1 и v2, до которых дело вообще не доходит, ибо цикл завершен

после строчки return null; у вас ничего не работает.

обращение к значениям выбранных радиобоксов должно быть только в теле цикла, по схеме: нашли — прибавили и т.д.

[Round]

Спасибо, ещё раз!

Всё понятно и доступно растолковали.

Жаль не могу вам ещё один раз плюсануть... ничего - я ещё вернусь...

[rotiga]

<table width="650" border="0" cellspacing="5" cellpadding="0">
  <tr>
    <td>Виды печатей</td>
    <td>За 1 день</td>
    <td>Срочно</td>
    <td>Срочно после 20:00</td>
  </tr>
  <tr>
    <td><p>Простая печать</p>
    <p>&nbsp;</p></td>
    <td><input type="radio" onMouseDown="this.isChecked=this.checked;" onClick="this.checked=!this.isChecked;"  value="400" name="prostayapechat" />400</td>
    <td><input type="radio" onMouseDown="this.isChecked=this.checked;" onClick="this.checked=!this.isChecked;"  value="600" name="prostayapechat" />600</td>
    <td>&nbsp;</td>
  </tr>
 <tr>
    <td><p>Автоматическая печать</p>
    <p>&nbsp;</p></td>
    <td><input type="radio" onMouseDown="this.isChecked=this.checked;" onClick="this.checked=!this.isChecked;"  value="750" name="avtopechat" />750</td>
    <td><input type="radio" onMouseDown="this.isChecked=this.checked;" onClick="this.checked=!this.isChecked;"  value="950" name="avtopechat" />950</td>
    <td>&nbsp;</td>
  </tr>
<tr>
    <td colspan="2">Файл-вложение</td>
    <td colspan="2"><input type="file" /></td>
  </tr>
  <tr>
    <td colspan="2">Организационная форма</td>
    <td colspan="2"> <select name="orgform">
    <option value="ООО">OOO</option>
    <option value="ЗАО">ЗАО</option>
    <option value="ИП">ИП</option>
    </select></td>
  </tr>
  <tr>
    <td colspan="2">Город</td>
    <td colspan="2"><input type="checkbox" value="Москва" name="gorod1" />Москва <input type="text" name="gorod" /></td>
  </tr>
  <tr>
    <td colspan="4" align="center" id="total_price" style="color: #993300;font-weight:bold; font-size:14px">0</td>
  </tr>
</table>

Тут дело такое, в моей форме есть и checkbox с буквенным значением и подсчет сбивается, как делать, чтобы подсчет велся только определенных групп кнопок по имени. Необходимо обрабатывать некоторые name="....", а не все подряд... T-sh Подскажите пожалуйста!

[rotiga]

Тут дело такое, в моей форме есть и checkbox с буквенным значением и подсчет сбивается, как делать, чтобы подсчет велся только определенных групп кнопок по имени. Необходимо обрабатывать некоторые name="....", а не все подряд... T-sh Подскажите пожалуйста!

Решение присвоить класс summed или другой и вывести расчет только по этим группам radio!

function getRadioGroupValue(radioGroupObj)
{
var val = 0;
  for (var i=0; i < radioGroupObj.length; i++)
    if (radioGroupObj[i].checked && radioGroupObj[i].className == "summed"){
       val+=+radioGroupObj[i].value;
	   }

var total= 0+val;
document.getElementById("total_price").innerHTML=total;

[ANAGAMA]

Осмелюсь предложить универсальное решение.

http://dixisolution.ru/?an=DixiCalc