如何在表单交互时将JS输出信息显示在DIV标签中？

嘿，我看你已经搭好基础框架啦！咱们来把这个功能完善得更顺畅，还能避免一些小坑～

先说说现有代码的小疏漏 #

你的check()函数目前有几个容易踩的小问题：

• 函数末尾缺少闭合的}，会直接导致语法错误，浏览器根本跑不起来
• 多个独立的if判断可以改成else if，这样逻辑更高效，不用每次都重复做相同的条件判断
• 还没设置触发这个函数的事件（比如用户选选项时自动触发，而不是等着手动调用）

完整的实现方案 #

我给你整理了一套完整的代码，包含HTML表单结构和优化后的JavaScript逻辑，直接就能用：

HTML部分 #

<form name="myform">
  <!-- 问题1的单选选项 -->
  <label>问题1：</label>
  <input type="radio" name="q1" value="a" onclick="check()">选项A
  <input type="radio" name="q1" value="b" onclick="check()">选项B<br>
  
  <!-- 问题2的单选选项 -->
  <label>问题2：</label>
  <input type="radio" name="q2" value="a" onclick="check()">选项A
  <input type="radio" name="q2" value="b" onclick="check()">选项B<br>
</form>

<!-- 用来显示提示的DIV，建议起个更有意义的ID，比如result -->
<div id="result"></div>

JavaScript部分 #

function check() {
  // 获取两个问题的选中值
  const q1 = document.myform.q1.value;
  const q2 = document.myform.q2.value;
  
  // 获取显示结果的DOM元素，提前缓存起来更高效
  const resultDiv = document.getElementById("result");
  
  // 用else if优化逻辑，减少不必要的判断
  if (q1 === "a" && q2 === "a") {
    resultDiv.innerHTML = "Green!";
  } else if (q1 === "a" && q2 === "b") {
    resultDiv.innerHTML = "Red...";
  } else {
    // 加个默认提示，处理用户还没选完选项的情况
    resultDiv.innerHTML = "请选择所有选项哦";
  }
}

关键优化点说明 #

• 给每个单选按钮加了onclick="check()"，用户一选选项就立刻更新提示，不用等提交表单，体验更流畅
• 用===严格相等判断，避免JavaScript隐式类型转换带来的奇怪问题
• 增加了else分支处理未选全的情况，不会让用户看到空白的提示区域
• 给显示结果的DIV改了个更语义化的ID（原来的div太通用啦）

这样调整后，你的功能就能稳定运行啦～

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