How can I pass the id of an element in the addEventListener?
Question
How can I get the id from many play buttons ?
I just get the last element when I alert the order.
I want do in the end something like:
videos[id].play();
instead of
video.play();
window.addEventListener("load", function(event) { var videos = document.getElementsByTagName("video"); var btnsPlay = document.getElementsByClassName("btnPlay"); for (var i = 0; i < videos.length; i++) { var video = videos[i]; var btnPlay = btnsPlay[i]; // … find button objects and add listener … btnPlay.addEventListener("click", function (event) { var id = i; video.play(); alert(id); }); // … } });
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="utf-8"> </head> <body> <video width="20%" height="240" controls> <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp> Your browser does not support the video tag. </video> <div class ="controlbtn"> <button class="btnPlay">Play</button> </div> <video width="20%" height="240" controls> <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp> Your browser does not support the video tag. </video> <div class ="controlbtn"> <button class="btnPlay">Play</button> </div> <video width="20%" height="240" controls> <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp> Your browser does not support the video tag. </video> <div class ="controlbtn"> <button class="btnPlay">Play</button> </div> </body> </html>
1 answers
solution1
1 ACCPTED 2016-10-20 23:20:14
Try changing
for (var i = 0; i < videos.length; i++)
To
for (let i = 0; i < videos.length; i++)
The reason this problem is happening is because when the function is being invoked the value of i has already changed. You need to use let to have it saved at the block scope level and not at the function scope level
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Using addEventListener and getElementsByClassName to pass an element id
How can i update the id when i use addEventListener?
How can i pass previously declared variables by using addEventListener?
How can i pass the date to my addEventListener function?
How to get and pass the clicked element as THIS inside a addEventListener
How to pass selected by querySelector element into a function in addEventListener?
Can I pass “new” anonymous function to addEventListener
addEventListener not linking to element Id?
How to addEventListener to querySelectorAll and when triggered get element index(or id, value)?
Other than class, id and text, how else can I pass a variable within an element in jQuery?
Related Tags