如何在if/else语句中比较HTML文本与数组中的字符串？

没问题，我来帮你搞定这个需求！本质上就是先获取用户选中的单选框选项值，再和预设的正确答案数组做匹配，用if/else判断结果并给出反馈。我结合你的测验代码，给你完整的可运行示例和关键说明：

完整代码示例 #

HTML部分（补全你的代码，增加提交按钮和结果展示区） #

<p>谁是你最大的敌人</p>
<input type="radio" name="vijand" value="Loki" class="vijand"> Loki
<input type="radio" name="vijand" value="Joker" class="vijand"> Joker
<input type="radio" name="vijand" value="Two Face" class="vijand"> Two Face
<input type="radio" name="vijand" value="Red Skull" class="vijand"> Red Skull
<input type="radio" name="vijand" value="Thanos" class="vijand"> Thanos
<button id="submitBtn">提交答案</button>
<p id="result"></p>

JavaScript部分（实现判断逻辑） #

// 定义正确答案数组——支持单个或多个正确选项
const correctAnswers = ["Thanos"];

// 获取页面元素
const submitBtn = document.getElementById('submitBtn');
const resultElement = document.getElementById('result');

// 监听提交按钮的点击事件
submitBtn.addEventListener('click', function() {
  // 获取所有单选按钮
  const radioButtons = document.querySelectorAll('.vijand');
  let selectedValue = null;

  // 遍历找到用户选中的单选框值
  radioButtons.forEach(radio => {
    if (radio.checked) {
      selectedValue = radio.value;
    }
  });

  // 先判断用户是否选中了选项
  if (!selectedValue) {
    resultElement.textContent = "请先选择一个选项哦！";
    resultElement.style.color = "orange";
    return; // 提前结束函数，不执行后续判断
  }

  // 核心：用if/else对比选中值和数组内的字符串
  if (correctAnswers.includes(selectedValue)) {
    resultElement.textContent = "回答正确！👍";
    resultElement.style.color = "green";
  } else {
    resultElement.textContent = `回答错误，正确答案是 ${correctAnswers.join('、')}！`;
    resultElement.style.color = "red";
  }
});

关键逻辑说明 #

• 获取选中值：通过querySelectorAll拿到所有单选按钮，遍历找到checked状态为true的按钮，取出它的value属性值。
• 数组匹配：用数组的includes()方法直接判断选中值是否存在于正确答案数组中，这个方法非常灵活——如果后续需要多个正确选项，只需要在correctAnswers里添加更多字符串即可（比如["Thanos", "Loki"]）。
• 边界处理：额外判断了用户未选任何选项的情况，避免空值对比导致的逻辑错误，同时给用户更友好的提示。
• 简化场景：如果你的需求是只有单个正确答案，也可以直接用严格相等判断，比如if (selectedValue === correctAnswers[0])，效果是一样的，但includes()扩展性更强。

内容的提问来源于stack exchange，提问作者Ogechi Chibueze