无刷新在当前页展示HTML测验条件逻辑生成的JS响应结果

问题说明 #

我是编程新手，正在开发一个测验网站，包含10+道题目，会根据用户的答案组合返回50+种独特响应。目前测验逻辑可正常运行，但存在以下问题：

• 提交后结果通过document.write跳转到新页面展示，体验不佳
• 尝试用innerHTML和textContent方法展示结果时无任何内容显示
• 希望提交后在页面底部的隐藏容器中展示结果

解决步骤 #

1. 阻止表单默认提交行为：表单默认提交会刷新页面，导致DOM操作失效，需在提交时阻止这一行为
2. 正确定位结果容器：确保能准确获取页面底部的#answer-Block元素
3. 替换document.write：用结果容器的textContent或innerHTML插入结果内容
4. 控制容器显示状态：给结果容器添加默认隐藏样式，提交后再显示

修改后的完整代码 #

HTML部分 #

<style>
  /* 默认隐藏结果容器 */
  .answer-container {
    display: none;
  }
</style>

<form onsubmit="return answers();">
  <div>
    <fieldset>
      <!--Question 1 textbox not considered in quiz results-->
      <legend>Question 1: What's is your name?</legend>
      <input type="text">
      
      <legend>Grouping 1</legend>
      <h3>Question 2: _______?</h3>
      <div class="input-group mb-3">
        <input type="radio" id="Option 1" name="Answer_Q2" value="Option 1">
        <label for="Option 1">Option 1</label><br>
        <input type="radio" id="Option 2" name="Answer_Q2" value="Option 2">
        <label for="Option 2">Option 2</label><br>
        <input type="radio" id="Option 3" name="Answer_Q2" value="Option 3">
        <label for="Option 3">Option 3</label><br>
        <input type="radio" id="Option 4" name="Answer_Q2" value="Option 4">
        <label for="Option 4">Option 4</label><br>
        <label class="input-group-text" for="Answer_Q2"></label>
      </div> 

      <div>
        <h3>Question 3: _______?</h3>
        <div class="input-group mb-3">
          <input type="radio" id="No_Q3" name="Answer_Q3" value="No">
          <label for="No_Q3">No</label><br>
          <input type="radio" id="Yes_Q3" name="Answer_Q3" value="Yes">
          <label for="Yes_Q3">Yes</label><br>
          <label class="input-group-text" for="Answer_Q3"></label>
        </div> 
      </div>
    </fieldset>

    <fieldset>
      <legend>Grouping 2</legend>
      <h3>Question 4: ________?</h3>
      <div class="input-group mb-3">
        <input type="radio" id="Yes_Q4" name="Answer_Q4" value="Yes">
        <label for="Yes_Q4">Yes</label><br>
        <input type="radio" id="No_Q4" name="Answer_Q4" value="No">
        <label for="No_Q4">No</label><br>
        <label class="input-group-text" for="Answer_Q4"></label>
      </div>
    </fieldset>

    <input type="Submit" id="btn-form" value="What's my result?">
  </div>
</form> 

<fieldset class="answer-container">
  <div>
    <p id="answer-Block"></p>
  </div>
</fieldset>

JavaScript部分 #

let commentLine2 = "Hello world!";

function answers() {
  // 阻止表单默认提交行为
  event.preventDefault();
  
  // 获取用户选择的答案，可选链避免未选中时报错
  let Answer_Q2 = document.querySelector('input[name="Answer_Q2"]:checked')?.value;
  let Answer_Q3 = document.querySelector('input[name="Answer_Q3"]:checked')?.value;
  let Answer_Q4 = document.querySelector('input[name="Answer_Q4"]:checked')?.value;

  // 获取结果容器元素
  const answerBlock = document.getElementById('answer-Block');
  const answerContainer = document.querySelector('.answer-container');

  // 根据答案组合匹配对应结果
  if (Answer_Q3 === "No" && Answer_Q4 === "No") {
    answerBlock.textContent = commentLine2;
  } else {
    // 可扩展其他答案组合的响应逻辑
    answerBlock.textContent = "其他结果";
  }

  // 显示结果容器
  answerContainer.style.display = "block";
  
  // 返回false确保表单不会触发刷新
  return false;
}

关键说明 #

• 修复了原HTML中重复的id（如多个Yes/No），避免DOM选择错误
• 用event.preventDefault()和返回false双重保障阻止页面刷新，确保DOM操作生效
• 添加可选链操作符?.，防止用户未选中选项时出现报错
• 通过CSS默认隐藏结果容器，提交后修改display属性展示结果

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