javascript - Mulitple Elements with the same ID

Question

I am trying to use a script on three videos using the same ID (#vid) on the same page. At the moment only one video seems to be able to use the script.

var video = document.getElementById('vid')
// When the 'ended' event fires
video.addEventListener('ended', function(){
  // Reset the video to 
  video.currentTime = 0;
  // And play again
  video.load();
});

Answer 1

Id must be unique. You should use class instead and then make use of document.getElementsByClassName('className');

var video = document.getElementsByClassName('vid');
var myFunction = function() {
    // Reset the video to 
    this.currentTime = 0;
    // And play again
    this.load();
};

for (var i = 0; i < video.length; i++) {
    video[i].addEventListener('ended', myFunction, false);
}