Блог

Главная - Вопросы по программированию - Показать один i-фрейм, скрыть другой с помощью ванильного JavaScript

Показать один i-фрейм, скрыть другой с помощью ванильного JavaScript

#javascript #html #if-statement

#javascript #HTML #if-оператор

Вопрос:

Если у пользователя уже есть одно выбранное видео (с помощью выпадающего списка), и он выбирает другое, я бы хотел, чтобы первое видео было заменено новым видео. Вместо этого, как я это настроил прямо сейчас, это просто добавление второго видео (или даже третьего, если выбрано третье видео) после первого. Как мне изменить свой код, чтобы удалить все текущие видео со страницы перед загрузкой нового видео?

 <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>

Ответ №1:

Вместо того, чтобы создавать там display: block , попробуйте изменить src iframe.

  <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>

Ответ №2:

Вот мое решение, я немного изменил ваш код.

 <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>

Я попытался сделать его более универсальным, чтобы, если вы добавите больше опций в выпадающий список, тогда, если значение выпадающего списка совпадает с frameId, никаких изменений в логике для показа / скрытия видео не требуется

ссылка на скрипку

Ответ №3:

Это потому, что вы не скрываете существующие iframes при отображении нового.

Например, в этом блоке:

 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.