footer元素内容提前显示问题：点击按钮前已出现，如何修复？

你的代码存在两个问题：一是footer#Answer默认处于可见状态，页面加载后就会直接显示里面的"Yes"；二是点击按钮时会把footer的内容复制到p#A中，导致出现两份重复文本。以下是两种修改方案：

方案一：直接控制footer的显示/隐藏 #

不需要额外的p#A元素，直接让footer初始隐藏，点击按钮后显示：

修改后的HTML代码：

<h2>Amazing performance</h2>
<!-- 初始设置display:none隐藏footer -->
<footer id="Answer" style="display:none;">
  <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>

修改后的JS代码：

function myFunction() {
  var footer = document.getElementById("Answer");
  footer.style.display = "block";
}

方案二：将footer内容转移到目标元素并隐藏原footer #

如果需要把内容放到p#A中，同时保持原footer初始隐藏：

修改后的HTML代码：

<h2>Amazing performance</h2>
<!-- 初始隐藏footer -->
<footer id="Answer" style="display:none;">
  <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>

JS代码可保持不变（或确保footer持续隐藏）：

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

注意：原代码中<h1>标签未正确闭合，已在修改方案中修正为</h1>，避免HTML结构错误。

内容的提问来源于stack exchange，提问作者user20889458