Why is the text in the footer tag appearing before I press a button that reveals it?-CodePudding

Why is my text in the footer element coming before I press a button? I have linked it so that the button reveals the text inside the footer. But the text was already there before I clicked the button, and another set of text from the footer appears when the button was clicked. How should I change my code?

function myFunction() {
  var x = document.getElementById("Answer").innerHTML;
  document.getElementById("A").innerHTML = x;
}

<h2>Amazing performance</h2>
<footer id="Answer">
  <h1>
    <p style="font-size:16px;font-family:verdana;color:Green">Yes</p>
    <h1>
</footer>

<p>Should You buy it?</p>
<button onclick="myFunction()">Click to reveal</button>

<p id="A"></p>

CodePudding user response：

The text is already present since your html code already has the footer element in it.

One way to do this to have the visibility element attached to your footer. Set it to "hidden".

When the button is clicked, you change visibility to "visible"

reference: https://www.w3schools.com/cssref/pr_class_visibility.php

CodePudding user response：

because you are displaying the Yes text in the DOM with HTML. You need to make display:none in css to the element with id "Answer", and then change it to display:block with JS when the button is click.

    <style>
    #Answer{
        display:none;
    }
    </style>
    <h2>Amazing performance</h2>
    <footer id="Answer">
      <h1>
        <p style="font-size:16px;font-family:verdana;color:Green">Yes</p>
        <h1>
    </footer>
    
    <p>Should You buy it?</p>
    <button onclick="myFunction()">Click to reveal</button>
<script>
    function myFunction() {
      var x = document.getElementById("Answer");
      x.style.display = 'block';
    }
</script>