If a user already has one video selected (using the drop-down), and they select another, I would like the first video to be replaced with the new video. Instead, how I have it set up right now, it is just appending the second video (or even third, if a third video is selected) after the first. How do I change my code to clear any current videos from the page before loading the new video?
<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>
Aucun commentaire:
Enregistrer un commentaire