Почему слушатель событий «Изменение» не запускает функцию при снятии флажка радио?

Question

В зависимости от того, отмечена ли радиокнопка, я хочу запустить функцию, которая изменяет value моего элемента с идентификатором next-page. Это мой код:

var uitschrijven_definitief = document.getElementById("uitschrijven");
var nextpage = document.getElementById("next-page");
  
  document.getElementById("uitschrijven").addEventListener("change", function() {
   if (uitschrijven_definitief.checked === true) {
    nextpage.value = "https://www.google.nl/";
   }  else {
    nextpage.value = "https://mywebsite.com";
   }
});

<input id="next-page" type="hidden" name="next" value="https://mywebsite.com"/>

<input id="3-maanden" name="dbfield240" class="clear-datum" type="radio" value="3 maanden"><label for="3-maanden">3 maanden</label>
<input id="6-maanden" name="dbfield240" class="clear-datum" type="radio" value="6 maanden"><label for="6-maanden">6 maanden</label>
<input id="uitschrijven" name="dbfield240" class="clear-datum" type="radio" value="Uitgeschreven"><label for="uitschrijven">Uitschrijven</label>

Дело в том, что изменение значения моего поля ввода с идентификатором next-page при выборе радио с идентификатором uitschrijven работает, но не работает. t вернуться к https://mywebsite.com после отмены выбора. Кто-нибудь знает, почему и как это исправить, чтобы оно работало?

Answer 1

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

Вы также должны сравнить значение выбранной цели со значением последнего переключателя.

e.target.value === 'Uitgeschreven'

Это делает функцию более универсальной c и менее связанной с существованием элемента.

Пример

var nextpage = document.getElementById('next-page');

// Add event listener to all radio buttons.
document.querySelectorAll('.clear-datum[name="dbfield240"]')
  .forEach(radio => radio.addEventListener('change', handleOnChange));

function handleOnChange(e) {
  if (e.target.value === 'Uitgeschreven') {
    nextpage.value = 'https://www.google.nl/';
  } else {
    nextpage.value = 'https://mywebsite.com';
  }
  console.log(nextpage.value); // Print the current new value...
}

<input id="next-page" type="hidden" name="next" value="https://mywebsite.com" />

<input id="3-maanden" name="dbfield240" class="clear-datum" type="radio" value="3 maanden"><label for="3-maanden">3 maanden</label>
<input id="6-maanden" name="dbfield240" class="clear-datum" type="radio" value="6 maanden"><label for="6-maanden">6 maanden</label>
<input id="uitschrijven" name="dbfield240" class="clear-datum" type="radio" value="Uitgeschreven"><label for="uitschrijven">Uitschrijven</label>