javascript - 如何制作一个在另一个功能发生时出现的按钮？

Question

如何制作一个关闭按钮，该按钮随内容一起出现并在单击时离开？我已经有了这段代码，但我似乎无法弄清楚如何使其发挥作用。

基本上，我正在创建的这个新按钮将关闭 youtube 视频并将常规站点恢复为默认值。

function play1() {
  var frame = document.getElementById("youtube-frame");
  frame.innerHTML += "<iframe width='560' height='315' src='https://www.youtube.com/embed/AkFs3YzxN_E' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>";
  document.getElementById('go-button').style.display = "none";
  document.getElementById('title').style.display = "none";
  document.getElementById('close').style.display = "block";
}

function close() {
  document.getElementById('youtube-frame').style.display = "none";
  document.getElementById('close').style.display = "none";
  document.getElementById('title').style.display = "block";
  document.getElementById('go-button').style.display = "block";
}

<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
  <a href="javascript:void(0)" class="hidden-button w3-display-topright" style="display: none" onclick="close()">×</a>
  <div class="w3-display-middle">
    <div id="title">
      <h1 class="w3-jumbo w3-animate-top">TAKE YOUR MARK</h1>
      <hr class="w3-border-grey" style="margin:auto;width:40%">
    </div>
    <div id="go-button">
      <p><button class="w3-center center transparent_btn" onclick="play1()">go</button></p>
    </div>
    <div id="youtube-frame" class="w3-display-middle"></div>
  </div>
</div>

Answer 1

添加 close id 到您实际调用 function close() {...} 的元素.所以，在 <a href="javascript:void(0)" class="hidden-button w3-display-topright" style = "display: none" onclick="close()">×</a>添加一个 ID，使其看起来像

<a href="javascript:void(0)" id="close" class="hidden-button w3-display-topright" style = "display: none" onclick="close()">×</a>

您基本上没有针对 X - 关闭 - javascript 中任何位置的元素，因为该元素没有 id="close" , 而你正试图用 document.getElementById("close") 得到它.