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

您可能会考虑使用事件委托-在单选按钮的容器上侦听change事件，然后使用按单选按钮值索引的对象来确定要设置的display样式：

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>

Answer 2

欢迎来到。

我建议您为每个input标签添加一个类，然后添加事件监听器：

var inputs = document.querySelectorAll('.inputClass');

for(var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('click', checkRadioAnswer, false);
}

或类似的东西。

编辑：添加了for循环来代替forEach，因为NodeList.prototype.forEach仅在较新的浏览器中受支持（感谢@CertainPerformance）

我目前使用onclick时，还有其他更好的选择吗？

2 个答案: