只有在提示答案正确后才显示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

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

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>

Answer 2

你需要为id =“birthday”的元素添加隐藏属性

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>