Как менять текст при выборе инпута?

Question

[alex88a]

Нашел в интернете такой код

<input type="radio" name="nameRadio" value="1" checked="checked"/>
<input type="radio" name="nameRadio" value="20"/>
<input type="radio" name="nameRadio" value="300"/>
<input type="radio" name="nameRadio" value="400"/>
<output id="rezultatRadio">1</output>

<script>
window.onclick = function onclickRadio() {
  var nameRadio = document.getElementsByName('nameRadio');
  for (var i = 0; i < nameRadio.length; i++) {
    if (nameRadio[i].type === 'radio' && nameRadio[i].checked) {
        rezultatRadio = nameRadio[i].value;       
    }
  }
  document.getElementById('rezultatRadio').innerHTML = rezultatRadio;
}
</script>

Но он работает только на одной форме, а у меня на странице их несколько.
Как можно сделать, что бы при выборе инпута, менялся текст в своем блоке?
И вообще было бы идеально, если бы этот текст брался не из value, а из своего к примеру new_text:

<input type="radio" name="nameRadio" value="20" new_text="11111" />

Answer 1

[0xD34F]

Элементы output - вместо id назначьте им класс.

document.addEventListener('change', function(e) {
  if (e.target.type === 'radio') {
    e.target.closest('form').querySelector('.output').textContent = e.target.value;
  }
});

Comments

[alex88a]

Большое спасибо за ответ! Решение работает, но я у меня значение value везде разные и менять их нельзя.
Пробовал через data-. Но все равно выбирает одно значение, последнее.

document.addEventListener('click', function(e) {
	var el = document.querySelector('#text-<?php echo $peremennaya; ?>');
  if (e.target.type === 'radio' ) {
    e.target.closest('.capt').querySelector('.bl').textContent = el.dataset.newtext;
  }
});

[0xD34F]

Попробуйте объяснить, что там у вас не так ещё раз. Я ничего не понял.

[alex88a]

есть несколько блоков на странице, в каждом блоке свои инпуты radio, после нажатия на инпут меняется текст в своем блоке.
нашел еще в интернете решение, добавил, в итоге вышло такое

<script>
document.addEventListener('click', function(e) {
$('#option_'+<?php echo $pr; ?>+' option:selected, #option_'+<?php echo $pr; ?>+' input:checked').each(function() {	
  if (e.target.type === 'radio' ) {
    e.target.closest('.capt').querySelector('.bl').textContent = $(this).attr('data-pr');
  }
})
}
);</script>

это работает нормально почти. но когда переключаешь инпуты в самом последнем блоке, то другие блоки уже меняют значение на то, которое выбрали в последнем блоке.

[0xD34F]

Яснее не стало. Давайте-ка вы воспроизведёте свою проблему в песочнице.

[alex88a]

0xD34F, вот так у меня https://codepen.io/AlekseiD88/pen/mZNRVo
Нажмите в опциях первого блока, потом второго. и снова первого блока и увидите

[0xD34F]

Ну и зачем было так делать? Зачем второй обработчик? Зачем дублирование id? Да и в целом - дичь какая-то. Можно же проще:

document.addEventListener('change', ({ target: t }) => {
  const pr = t.dataset.pr;
  if (pr) {
    t.closest('.caption').querySelector('.pri').textContent = pr;
  }
});

[alex88a]

0xD34F, да я только учусь, как смог, так и делал. По вашему примеру все работает. Огромное спасибо!