Несколько одинаковых скриптов на странице

[Алёна Стрелкова]

Здравствуйте!

Подскажите, пожалуйста, как можно переделать скрипт так, чтобы указать элементы, для которых он действует, отдельно

<input type="radio" name="nameRadio" value="шт." checked="checked"/><input type="radio" name="nameRadio" value="п.м"/><output id="rezultatRadio">шт.</output><script>window.onclick = function onclickRadio() {  var nameRadio = document.getElementsByName('nameRadio');  for (var i = 0; i < nameRadio.length; i++) {    if (nameRadio.type === 'radio' && nameRadio.checked) {        rezultatRadio = nameRadio.value;           }  }  document.getElementById('rezultatRadio').innerHTML = rezultatRadio;}</script>

(пример совсем немного переделала, взяла отсюда: http://shpargalkablog.ru/2013/04/value-input-javascript.html )

 

Нужно, чтобы при нажатии на радио-кнопку, значение её value передавалось в output (находится выше input-ов)

 

Проблема в том, что это элемент блока товара страницы каталога, на которой этих товаров может быть очень много и писать подряд много одинаковых скриптов, в которых отличается только id и name, кажется мне не лучшей идеей

[Great Rash]

Во-первых, у вас в скрипте ошибка.

Во-вторых, вешать обработчик клика таким образом - не лучшая идея. Даже очень плохая идея.

Представим, что у нас миллион радио-кнопок. Так же представим, что у нас нет никакого JS-фреймворка и мы пишем на чистом JS. В таком случае самое простое - это каждой радио-кнопке проставить определённый класс (а ещё лучше data-атрибут), затем нужно найти все радиокнопки на странице (document.querySelectorAll - если вас интересуют только новые браузеры, или document.getElementsByTagName - если мы поддерживаем старые версии). После того как мы получили массив элементов мы пробегаемся по нему циклом и отсортировываем только нужные нам инпуты (т.е. только те у которых стоит некий класс или присутствует нужный нам data-атрибут). И уже этим элементам назначаем обработчик клика. Только нужно не забыть назначение обработчика завернуть в замыкание, а то все элементы получат обработчик как у последнего. Делается это так:

for (var i = elems.length; i >= 0; i--) { // цикл по элементам  (function(el) { // собственно замыкание    el.onclick = function() {      console.log(i); // ну или чего вы там делать по клику собрались    };  })(elems[i]);}

[Алёна Стрелкова]

Во-первых, у вас в скрипте ошибка.

Во-вторых, вешать обработчик клика таким образом - не лучшая идея. Даже очень плохая идея.

Представим, что у нас миллион радио-кнопок. Так же представим, что у нас нет никакого JS-фреймворка и мы пишем на чистом JS. В таком случае самое простое - это каждой радио-кнопке проставить определённый класс (а ещё лучше data-атрибут), затем нужно найти все радиокнопки на странице (document.querySelectorAll - если вас интересуют только новые браузеры, или document.getElementsByTagName - если мы поддерживаем старые версии). После того как мы получили массив элементов мы пробегаемся по нему циклом и отсортировываем только нужные нам инпуты (т.е. только те у которых стоит некий класс или присутствует нужный нам data-атрибут). И уже этим элементам назначаем обработчик клика. Только нужно не забыть назначение обработчика завернуть в замыкание, а то все элементы получат обработчик как у последнего. Делается это так:

 

for (var i = elems.length; i >= 0; i--) { // цикл по элементам  (function(el) { // собственно замыкание    el.onclick = function() {      console.log(i); // ну или чего вы там делать по клику собрались    };  })(elems[i]);}

А HTML нужно будет переделать, получается?

Если будет много инпутов с одним и тем же классом, как скрипт "узнает", в какой именно output выводить значение?

<form class="myform"><input type="radio" name="nameRadio" value="шт." checked="checked"/><input type="radio" name="nameRadio" value="п.м"/><output id="rezultatRadio">шт.</output></form>

Можно ведь сделать так, чтобы скрипт работал для form с определённым классом?

Edited August 3, 2015 by Алёна Стрелкова

[Great Rash]

Можно ведь сделать так, чтобы скрипт работал для form с определённым классом?

Можно и так: найти все радио-кнопки внутри определённой формы.

Если будет много инпутов с одним и тем же классом, как скрипт "узнает", в какой именно output выводить значение?

У вас несколько output'ов или как?

[Sensei]

Клик здесь не подходит, есть же событие «change»

Я бы примерно так сделал http://jsfiddle.net/99a2t2az/

Значения атрибутов «name» и «data-js-name» должны быть идентичны.

[Алёна Стрелкова]

 

Можно ведь сделать так, чтобы скрипт работал для form с определённым классом?

Можно и так: найти все радио-кнопки внутри определённой формы.

Если будет много инпутов с одним и тем же классом, как скрипт "узнает", в какой именно output выводить значение?

У вас несколько output'ов или как?

 

да, output-ов несколько

и для каждого outputa-а по два inputa

Клик здесь не подходит, есть же событие «change»

Я бы примерно так сделал http://jsfiddle.net/99a2t2az/

Значения атрибутов «name» и «data-js-name» должны быть идентичны.

 

Спасибо большое! Попробую сделать так

Значения атрибутов «name» и «data-js-name» должны быть идентичны.

 

Получается, всё равно для каждого отдельно нужно задавать name и data-js-name

Edited August 3, 2015 by Алёна Стрелкова

[Sensei]

Тогда так http://jsfiddle.net/99a2t2az/1/

В ие8 работать не будет, если это критично)

[Алёна Стрелкова]

Тогда так http://jsfiddle.net/99a2t2az/1/В ие8 работать не будет, если это критично)

 

Спасибо! Вы очень помогли!