循环JavaScript

Question

I have been searching Stackoverflow and Google, and tried everything I clould think of to figure out how to loop through an html file with javascript and find all of the video files, and their unique ID, but I cant seem to get it right. I have not been coding in several years, so I am very rusty and most of my experience is with back end code. I have very little experience with DOM and Javascipt, I am sure what ever I have tried, I have probably screwed up the syntax/semantics.

What the code does:

The Javascript makes videos pop up and play in a modal window, however since it is hard coded, I can only input one unique ID, and when you click on each of the videos on the web page, of course, they play the same video.

Hope someone can help, this is a personal project for my game collection and the only thing I have left to complete is this last piece of code. Thanks in advance for any assistance.

 window.document.onkeydown = function(e) { if (!e) { e = event; } if (e.keyCode == 27) { lightbox_close(); } } function lightbox_open() { var lightBoxVideo = document.getElementById("Some-ID-Variable"); window.scrollTo(0, 0); document.getElementById('light').style.display = 'block'; document.getElementById('fade').style.display = 'block'; lightBoxVideo.play(); } function lightbox_close() { var lightBoxVideo = document.getElementById("Some-ID-Variable"); document.getElementById('light').style.display = 'none'; document.getElementById('fade').style.display = 'none'; lightBoxVideo.pause(); } 

 <!--Here is the HTML I have, I am only showing 2 game titles in the example, but this code repeats for every game in my collection:--> <div class="containers"> <!--Begin .container--> <div id="light"> <a class="boxclose" id="boxclose" onclick="lightbox_close();"></a> <video id="MyVideo" width="600" controls> <source src="videos/game-title-1-trailer.mp4" type="video/mp4"> </video> </div> <div id="fade" onClick="lightbox_close();"></div> <div> <a href="#" onclick="lightbox_open();"><img class="title-image" src="images/placeholder.jpg" alt="Some Title"></a> <br> <a href="#" onclick="lightbox_open();"><span class="title-text">Game Title 1</span></a> <br> <ul> <li>Comfort: Intense</li> <li>Learning Curve: Intermediate</li> </ul> <br> <p class="desc-text">The game decription goes here. The game decription goes here. The game decription goes here. The game decription goes here.</p> <br> </div> </div> <!--End .container--> <div class="containers"> <!--Begin .container--> <div id="light"> <a class="boxclose" id="boxclose" onclick="lightbox_close();"></a> <video id="MyVideo" width="600" controls> <source src="videos/game-title-trailer-2.mp4" type="video/mp4"> </video> </div> <div id="fade" onClick="lightbox_close();"></div> <div> <a href="#" onclick="lightbox_open();"><img class="title-image" src="images/placeholder.jpg" alt="Some Title"></a> <br> <a href="#" onclick="lightbox_open();"><span class="title-text">Game Title 2</span></a> <br> <ul> <li>Comfort: Intense</li> <li>Learning Curve: Intermediate</li> </ul> <br> <p class="desc-text">The game decription goes here. The game decription goes here. The game decription goes here. The game decription goes here.</p> <br> </div> </div> 

Answer 1

Like James said, document.querySelectorAll('video') will get every video tag on the page, but if I understand your question correctly, you want to find a specific ID and play it when it's chosen. Looping is probably an inefficient way to do that, especially if you have many videos.

Perhaps you can try putting a variable in your onclick, like onclick="lightbox_open('1')" , then in that function you can do:

function lightbox_open(idNum) {
  var lightBoxVideo = document.getElementById("Some-ID-Variable" + idNum);
  //...
}

Then if you're building more possible videos from the backend, you can just increment that variable when you set each element's onclick attribute.