Div 容器出现然后很快消失

Question

我正在制作一个小程序来计算你的出生年份，以尝试应用我所学到的知识，但是当我使用 JavaScript 将 div 容器的样式更改为“块”时，它会很快出现然后消失。

预期：按下“提交”按钮并完成计算后会出现 div 框。

结果：div 框出现然后消失得非常快。

收集数据计算出生年份的表格：

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

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

answerBox.style.display = "none";

function returnAge() {
  age = document.getElementById("age").value;
  //finds value of the radio input
  document.getElementsByName("bday").forEach((radio) => {
    if (radio.checked) {
      hadBirthDay = radio.value;
    }
  });
  if (age && hadBirthDay) {
    calculateBirthYear();
  }
}

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

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

#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;
}

<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" onclick="returnAge()">Submit</button>
</form>

<!-- html of the div that isn't working : -->
<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>

Answer 1

您的代码缺少两件事，调用revealAnswer()并实际将答案放入answerBox div中。

我在calculateBirthYear()调用之后添加了revealAnswer()调用，并修改了calculateBirthYear()以将答案添加到DOM中。

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

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

answerBox.style.display = "none";

function returnAge(event) {
  event.preventDefault()
  
  age = document.getElementById("age").value;
  //finds value of the radio input
  document.getElementsByName("bday").forEach((radio) => {
    if (radio.checked) {
      hadBirthDay = radio.value;
    }
  });
  if (age && hadBirthDay) {
    calculateBirthYear();

    revealAnswer();
  }
}

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

function revealAnswer() {
  document.querySelector("#answerBox").innerText = birthYear;

  answerBox.style.display = "block";
}

#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;
}

<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" onclick="returnAge(event)">Submit</button>
</form>

<!-- html of the div that isn't working : -->
<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>