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>

由于您的JavaScript元素中没有X，因此您基本上没有将id="close"-close-元素作为目标，而您正尝试使用{{1} }。

如何使按钮在出现其他功能时出现？

1 个答案: