javascript - 除了我目前使用的 onclick 之外，还有更好的选择吗？

Question

我正在整理一个表单，一些内容将根据用户的单选按钮选择而定。我有按我预期工作的代码(根据选择隐藏或显示后续内容)。但是，我只能在 html 中使用 onclick(即“onclick=checkRadioAnswer()”)。例如，请参见下面的片段。

我宁愿将它全部保存在一个 JS 文件中，而不是在 HTML 中使用 onclick。我认为 addEventListener() 是可行的方法，但我终生无法让它发挥作用。

关于我如何修改此代码以使其与我当前的设置相同但不在 html 中使用 onclick 的任何建议？我还需要保留这个普通的 JS。谢谢

window.onload = function setDefaultState() {
  checkRadioAnswer(); 
};

const changingContent = document.getElementById("changing-content");

function checkRadioAnswer() {
  var radios = document.getElementsByName("genericRadio")
  for (var i = 0, length = radios.length; i < length; i++) {
      if (radios[i].checked) {
        if (radios[i].value == "1") {
          changingContent.style.display = "none";
        }
        if (radios[i].value == "2") {
          changingContent.style.display = "block";
        }
        if (radios[i].value == "3") {
          changingContent.style.display = "none";
        }
        if (radios[i].value == "4") {
          changingContent.style.display = "block";
        }
      }
    }
};

<fieldset class="fieldset-radio">
  <legend>
    <h1 class="question-primary">The question goes here</h1>
  </legend>
  <div class="field-radioButton">
    <label for="answer1">
      <input id="answer1"
        type="radio"
        name="genericRadio"
        value="1"
        checked="checked"
        onclick="checkRadioAnswer()">
      <span>1st answer text</span>
    </label>
  </div>
  <div class="field-radioButton">
    <label for="answer2">
      <input id="answer2"
        type="radio"
        name="genericRadio"
        value="2"
        onclick="checkRadioAnswer()">
      <span>2nd answer text</span>
    </label>
  </div>
  <div class="field-radioButton">
    <label for="answer3">
      <input id="answer3"
        type="radio"
        name="genericRadio"
        value="3"
        onclick="checkRadioAnswer()">
      <span>3rd answer text</span>
    </label>
  </div>
  <div class="field-radioButton">
    <label for="answer4">
      <input id="answer4"
        type="radio"
        name="genericRadio"
        value="4"
        onclick="checkRadioAnswer()">
      <span>4th answer text</span>
    </label>
  </div>
</fieldset>

<div id="changing-content">
  <p>Content depending on answer goes here</p>
</div>

Answer 1

您可能会考虑改用事件委托(delegate) - 监听单选按钮容器上的 change 事件，然后使用由单选按钮值索引的对象来确定显示要设置的样式:

const changingContent = document.getElementById("changing-content");
const container = document.querySelector('.fieldset-radio');
container.addEventListener('change', checkRadioAnswer);

const displayByValue = {
  1: 'none',
  2: 'block',
  3: 'none',
  4: 'block'
}
function checkRadioAnswer() {
  const checkedRadio = container.querySelector('input[type="radio"]:checked');
  changingContent.style.display = displayByValue[checkedRadio.value];
}

checkRadioAnswer();

<fieldset class="fieldset-radio">
  <legend>
    <h1 class="question-primary">The question goes here</h1>
  </legend>
  <div class="field-radioButton">
    <label for="answer1">
      <input id="answer1"
        type="radio"
        name="genericRadio"
        value="1"
        checked="checked">
      <span>1st answer text</span>
    </label>
  </div>
  <div class="field-radioButton">
    <label for="answer2">
      <input id="answer2"
        type="radio"
        name="genericRadio"
        value="2">
      <span>2nd answer text</span>
    </label>
  </div>
  <div class="field-radioButton">
    <label for="answer3">
      <input id="answer3"
        type="radio"
        name="genericRadio"
        value="3">
      <span>3rd answer text</span>
    </label>
  </div>
  <div class="field-radioButton">
    <label for="answer4">
      <input id="answer4"
        type="radio"
        name="genericRadio"
        value="4">
      <span>4th answer text</span>
    </label>
  </div>
</fieldset>

<div id="changing-content">
  <p>Content depending on answer goes here</p>
</div>