Как написать «правильный» javascript (на примере)?

Question

[genny45]

Здравствуйте.
Такая ситуация, на странице имеются радио кнопки, при нажатии на которые выводится значение input.

Вот так все работает отлично (групп в примере 3, но будет около 20):
Вот пример скрипта ниже: agroachtuba.ru/testing/index2.php

<script>
window.onclick = function onclickRadio1() {
  var nameRadio1 = document.getElementsByName('nameRadio1');
  var nameRadio2 = document.getElementsByName('nameRadio2');
  var nameRadio3 = document.getElementsByName('nameRadio3');

  for (var i = 0; i < nameRadio1.length; i++) {
    if (nameRadio1[i].type === 'radio' && nameRadio1[i].checked) {
        rezultatRadio1 = nameRadio1[i].value;       
    }
  }
  
 for (var i = 0; i < nameRadio2.length; i++) {
    if (nameRadio2[i].type === 'radio' && nameRadio2[i].checked) {
        rezultatRadio2 = nameRadio2[i].value;       
    }
  }

 for (var i = 0; i < nameRadio3.length; i++) {
    if (nameRadio3[i].type === 'radio' && nameRadio3[i].checked) {
        rezultatRadio3 = nameRadio3[i].value;       
    }
  }

  document.getElementById('result1').innerHTML = rezultatRadio1;
  document.getElementById('result2').innerHTML = rezultatRadio2;
  document.getElementById('result3').innerHTML = rezultatRadio3; 
}
</script>

<form>
	<div class="element-textarea2">
	<input type="radio" id="dplcment-01" name="nameRadio1" value="28" checked="checked"/>
	<input type="radio" id="dplcment-02" name="nameRadio1" value="38"/>
	<input type="radio" id="dplcment-03" name="nameRadio1" value="65"/>
</div>
	<span class="price" id="result1">28</span>
</form>

<form>
	<div class="element-textarea2">
	<input type="radio" id="dplcment-01" name="nameRadio2" value="10" checked="checked"/>
	<input type="radio" id="dplcment-02" name="nameRadio2" value="20"/>
	<input type="radio" id="dplcment-03" name="nameRadio2" value="30"/>
</div>
	<span class="price" id="result2">10</span>
</form>

<form>
	<div class="element-textarea2">
	<input type="radio" id="dplcment-01" name="nameRadio3" value="12" checked="checked"/>
	<input type="radio" id="dplcment-02" name="nameRadio3" value="13"/>
	<input type="radio" id="dplcment-03" name="nameRadio3" value="14"/>
</div>
	<span class="price" id="result3">12</span>
</form>

Все отлично при нажатии на радио подставляется в span с id = result

Но, с точки зрения программирования, этот не "код":
Как сделать его более "правильным":

Спасибо за помощь тостерчане!

Answer 1

[Yustas Alexu]

window.onclick = function onclickRadio1() {
  var nameRadios = document.querySelectorAll('input[name^="nameRadio"]:checked'),
        results = document.querySelectorAll('[id^="result"]');

  Array.prototype.forEach.call(results, function (result, index) {
      result.textContent = nameRadios[index].value;
  });
}

Как-то так

Comments

[genny45]

Спасибо огромное! То что нужно! Все отлично работает!

Answer 2

[Леонид Сысолетин]

1. Взять jQuery и не мучиться.
2. Вынести повторяющийся код в функцию, которая по имени радиобуттона выдаёт value выбранного элемента.
3. Шаманить

document.querySelector('input[name="nameRadio1"]:checked').value

Comments

[genny45]

Наглею, но можно подробнее :))

[Леонид Сысолетин]

По какому пункту? =)
Вот, IceJOKER дал хороший совет. Подключаешь jQuery, и дальше всё очевидно.

Answer 3

[IceJOKER]

Вешаете обработчик onclick/onchange для всех кнопок(один и тот же), а в самом обработчике смотрите на какой кнопке произошло событие и в зависимости от его названия присваиваете значение соотв-му input-у

Answer 4

[GM2mars]

var radiobutton={
    radios: document.querySelectorAll('input[type="radio"]'),
    
    getSelect: function(event) {
        var el=event.target, 
            val=el.value;
        el.parentNode.parentNode.querySelectorAll('span')[0].textContent=val;
    },
    
    init: function() {
        Array.prototype.forEach.call(this.radios, function (el, i) {
            el.addEventListener('click', this.getSelect);
        }.bind(this));
    }
};

radiobutton.init();

https://jsfiddle.net/4svkk2j4/