计算出生年份程序中Div容器显示后瞬间消失的问题

问题核心：点击提交按钮计算出生年份后，结果div短暂显示立刻消失，无法保持显示状态。

问题原因 #

按钮位于<form>标签内，默认类型为submit，点击时会触发表单的默认提交行为——页面刷新，导致之前通过JS设置的answerBox.style.display = "block"被重置为初始的none，所以div刚显示就消失了。另外当前代码没有调用revealAnswer()函数，也未将计算结果更新到页面，逻辑上也无法正常显示结果。

解决方案 #

1. 阻止表单默认提交行为：给按钮添加type="button"属性，避免触发表单提交导致页面刷新
2. 完善逻辑：计算完成后更新结果文本并调用显示div的函数

修改后的完整代码 #

HTML部分

<form>
  <section>
    <label for="age">Insert Age:</label>
    <input type="number" min="0" id="age" name="age" required />
  </section>

  <br />

  <section class="bday">
    <span>Have you had your birthday this year?</span>
    <br />
    <input type="radio" id="yes" name="bday" value="yes" class="radio" required />
    <label for="yes">Yes</label>
    <input type="radio" id="no" name="bday" value="no" class="radio" required />
    <label for="no">No</label>
  </section>

  <br />

  <button id="submit" type="button" onclick="returnAge()">Submit</button>
</form>

<section>
  <h2 id="answerBoxText" class="answer">YOU WERE BORN IN:</h2>
  <div id="answerBox" class="answer">
    <h3 id="answerText" class="answer">year</h3>
  </div>
</section>

JavaScript部分

let currentYear = new Date().getFullYear();
let age = null;
let birthYear = null;
let hadBirthDay = null;

let answerBox = document.getElementById("answerBox");
let answerText = document.getElementById("answerText");

answerBox.style.display = "none";

function returnAge() {
  age = document.getElementById("age").value;
  document.getElementsByName("bday").forEach((radio) => {
    if (radio.checked) {
      hadBirthDay = radio.value;
    }
  });
  if (age && hadBirthDay) {
    calculateBirthYear();
    answerText.textContent = birthYear;
    revealAnswer();
  }
}

function calculateBirthYear() {
  if (hadBirthDay === "yes") {
    birthYear = currentYear - age;
  } else if (hadBirthDay === "no") {
    birthYear = currentYear - age - 1;
  }
}

function revealAnswer() {
  answerBox.style.display = "block";
}

CSS部分（无需修改）

#answerBox {
  background-color: #2d415e;
  color: #7194c9;
  padding: 5px;
  margin-top: 20px;
  margin-left: 150px;
  margin-right: 150px;
  height: auto;
  text-align: center;
  border-radius: 50px;
}

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