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

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>