仅在提示答案正确后才显示 H1 Javascript

Question

我只需要在用户在提示中输入正确的输入（即 30）后才能显示生日快乐。 我希望它默认隐藏。 我这样做的原因是我想稍后向这个 h1 标签添加一些 CSS 动画。

 function myFunction() { var txt; var myTextbox = document.getElementById("bday"); var Age = prompt("How old are you?:"); if (Age == 30) { return myTextbox; } else { txt = "Really? "; } document.getElementById("demo").innerHTML = txt; }

 <button onclick="myFunction()">HOW OLD ARE YOU?</button> <h1 id="demo"></h1> <h2 id="bday"> Happy Birthday! </h2>

Answer 1

您需要为 id = "bday" 的元素添加隐藏属性

 document.getElementById("bday").style.display = "none"; function myFunction() { var txt; var myTextbox = document.getElementById("bday"); var Age = prompt("How old are you?:"); if (Age == 30) { document.getElementById("bday").style.display = "block"; return myTextbox; } else { txt = "Really? "; } document.getElementById("demo").innerHTML = txt; }

 <button onclick="myFunction()">HOW OLD ARE YOU?</button> <h1 id="demo"></h1> <h2 id="bday" hidden> Happy Birthday! </h2>

Answer 2

无需复杂化，您可以使用更少的标记和改进的功能来实现：

 function myFunction() { var myTextbox = document.getElementById("response"); var Age = prompt("How old are you?"); if (Age == 30) { myTextbox.innerHTML = "Happy Birthday!"; } else if (Age == null) { // addition, if clicked on cancel myTextbox.innerHTML = ""; } else { myTextbox.innerHTML = "Really?"; } }

 <button onclick="myFunction()">HOW OLD ARE YOU?</button> <h1 id="response"></h1>