显示一个i帧，使用普通JavaScript隐藏另一个i帧_Javascript_Html_If Statement

显示一个i帧，使用普通JavaScript隐藏另一个i帧

javascript html if-statement

显示一个i帧，使用普通JavaScript隐藏另一个i帧,javascript,html,if-statement,Javascript,Html,If Statement,如果用户已经选择了一个视频（使用下拉菜单），并且他们选择了另一个，我希望第一个视频被新视频替换。相反，我现在是如何设置的，它只是在第一个视频之后附加第二个视频（甚至第三个，如果选择了第三个视频）。在加载新视频之前，如何更改代码以清除页面中的任何当前视频 <body> <h1>Let's Meditate.</h1> <select id="timer"> <option value="select

如果用户已经选择了一个视频（使用下拉菜单），并且他们选择了另一个，我希望第一个视频被新视频替换。相反，我现在是如何设置的，它只是在第一个视频之后附加第二个视频（甚至第三个，如果选择了第三个视频）。在加载新视频之前，如何更改代码以清除页面中的任何当前视频

<body>
  <h1>Let's Meditate.</h1>
  <select id="timer">
    <option value="select" disabled selected>Select One...</option>
    <option value="twenty">20 minutes</option>
    <option value="fifteen">15 minutes</option>
    <option value="ten">10 minutes</option>
    <option value="five">5 minutes</option>
  </select>
  <button type="button" onclick="meditate();">Go!</button>
  <button onclick="refresh();">Refresh</button>
  <div class="videos">
    <iframe id="twentyMinVid" width="560" height="315" src="https://www.youtube.com/embed/VjxGjDo1tWA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe id="fifteenMinVid" width="560" height="315" src="https://www.youtube.com/embed/aIIEI33EUqI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe id="tenMinVid" width="560" height="315" src="https://www.youtube.com/embed/Xl_B45DpMLU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe id="fiveMinVid" width="560" height="315" src="https://www.youtube.com/embed/3RxXiFgkxGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

  <script>

    function meditate() {
      var timer = document.getElementById("timer").value;

      if(timer == "twenty") {
        document.getElementById("twentyMinVid").style.display = "block";
      } else if(timer == "fifteen") {
        document.getElementById("fifteenMinVid").style.display = "block";
      } else if(timer == "ten") {
        document.getElementById("tenMinVid").style.display = "block";
      } else if(timer == "five") {
        document.getElementById("fiveMinVid").style.display = "block";
      } else {
        document.querySelector(".videos").innerHTML = "Please select a time limit and click Go."
      }
    }

    function refresh() {
      location.reload();
    }
  </script>
</body>


让我们冥想吧。
选择一个。。。
20分钟
15分钟
10分钟
5分钟
走！
刷新
函数冥想（）{
var timer=document.getElementById（“timer”）.value；
如果（计时器=“二十”）{
document.getElementById（“twentyMinVid”）.style.display=“block”；
}否则，如果（计时器=“十五”）{
document.getElementById（“fifteenMinVid”）.style.display=“block”；
}否则如果（计时器=“十”）{
document.getElementById（“tenMinVid”）.style.display=“block”；
}否则如果（计时器=“五”）{
document.getElementById（“fiveMinVid”）.style.display=“block”；
}否则{
document.querySelector（“.videos”）.innerHTML=“请选择一个时间限制，然后单击Go。”
}
}
函数刷新（）{
location.reload（）；
}

这是因为在显示新的iFrame时没有隐藏现有的iFrame

例如，在此块中：

if(timer == "twenty") {
    document.getElementById("twentyMinVid").style.display = "block";

    //Add code here for hiding the other divs
     document.getElementById("fifteenMinVid").style.display = "none";
     document.getElementById("tenMinVid").style.display = "none";
     document.getElementById("fiveMinVid").style.display = "none";
  }
....You need to do this same thing in other sections so that you are hiding other divs while you show the correct div.

尝试更改iframe src，而不是在那里显示：block

 <body>
 <h1>Let's Meditate.</h1>
 <select id="timer">
<option value="select" disabled selected>Select One...</option>
<option value="twenty">20 minutes</option>
<option value="fifteen">15 minutes</option>
<option value="ten">10 minutes</option>
<option value="five">5 minutes</option>
</select>
<button type="button" onclick="meditate();">Go!</button>
 <button onclick="refresh();">Refresh</button>
 <div class="videos">
 <iframe id="iframe" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

<script>

 function meditate() {
  var timer = document.getElementById("timer").value;
  var iframe = document.getElementById("iframe");

  if(timer == "twenty") {
    iframe.src = "https://www.youtube.com/embed/VjxGjDo1tWA";
  } else if(timer == "fifteen") {
    iframe.src = "https://www.youtube.com/embed/aIIEI33EUqI";
  } else if(timer == "ten") {
    iframe.src = "https://www.youtube.com/embed/Xl_B45DpMLU";
  } else if(timer == "five") {
    iframe.src = "https://www.youtube.com/embed/3RxXiFgkxGc";
  } else {
    document.querySelector(".videos").innerHTML = "Please select a time limit and click Go."
    }
  }

  function refresh() {
      location.reload();
  }
</script>


让我们冥想吧。
选择一个。。。
20分钟
15分钟
10分钟
5分钟
走！
刷新
函数冥想（）{
var timer=document.getElementById（“timer”）.value；
var iframe=document.getElementById（“iframe”）；
如果（计时器=“二十”）{
iframe.src=”https://www.youtube.com/embed/VjxGjDo1tWA";
}否则，如果（计时器=“十五”）{
iframe.src=”https://www.youtube.com/embed/aIIEI33EUqI";
}否则如果（计时器=“十”）{
iframe.src=”https://www.youtube.com/embed/Xl_B45DpMLU";
}否则如果（计时器=“五”）{
iframe.src=”https://www.youtube.com/embed/3RxXiFgkxGc";
}否则{
document.querySelector（“.videos”）.innerHTML=“请选择一个时间限制，然后单击Go。”
}
}
函数刷新（）{
location.reload（）；
}

这是我的解决方案，我稍微修改了你的代码

<body>
  <h1>Let's Meditate.</h1>
  <select id="timer">
    <option value="select" disabled selected>Select One...</option>
    <option value="twentyMinVid">20 minutes</option>
    <option value="fifteenMinVid">15 minutes</option>
    <option value="tenMinVid">10 minutes</option>
    <option value="fiveMinVid">5 minutes</option>
  </select>
  <button type="button" onclick="meditate();">Go!</button>
  <button onclick="refresh();">Refresh</button>
  <div class="videos">
    <iframe id="twentyMinVid" width="560" height="315" src="https://www.youtube.com/embed/VjxGjDo1tWA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe id="fifteenMinVid" width="560" height="315" src="https://www.youtube.com/embed/aIIEI33EUqI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe id="tenMinVid" width="560" height="315" src="https://www.youtube.com/embed/Xl_B45DpMLU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe id="fiveMinVid" width="560" height="315" src="https://www.youtube.com/embed/3RxXiFgkxGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

  <script>
  function meditate() {
   var timer = document.getElementById("timer").value;
   if (timer === 'select') {
     alert("Please select a time limit and click Go.");
     return;
   }
   var options = document.getElementById("timer").options;
   for (var i = 1; i < options.length; i++) {
     if (options[i].value === timer) {
       document.getElementById(timer).style.display = "block";
     } else {
       document.getElementById(options[i].value).style.display = "none";
     }
   }

 }

 function refresh() {
   location.reload();
 }

  </script>
</body>


让我们冥想吧。
选择一个。。。
20分钟
15分钟
10分钟
5分钟
走！
刷新
函数冥想（）{
var timer=document.getElementById（“timer”）.value；
如果（计时器=='选择'）{
警报（“请选择一个时间限制并单击“开始”）；
返回；
}
var options=document.getElementById（“计时器”）.options；
对于（变量i=1；i


我试图使它更通用，这样，如果您在下拉列表中添加更多选项，然后如果下拉列表值与frameId相同，则不需要在显示/隐藏视频的逻辑中进行任何修改
链接到