javascript, как петля идентификатор для всех строк, выводится из sql db [duplicate]

Использование одного и того же идентификатора более чем некорректно разметки, а когда getElementById возвращает только один элемент, он возвращает первый, с которым он сталкивается.

Однако, если вы не можете изменить разметки с использованием существующего сценария точно так же, как вы можете использовать querySelectorAll для выбора всего элемента с тем же значением атрибута id.

var videos = document.querySelectorAll('[id="vid"]')

for (var i = 0; i < videos.length; i++) {
    videos[i].addEventListener('ended', function() {
        // Reset the video to 
        video.currentTime = 0;
        // And play again
        video.load();
    });
}

Однако, если вы можете используйте другие средства для идентификации элементов, таких как атрибуты данных или классы.

Лично я склоняюсь к атрибутам данных для функционального использования и оставляю классы для использования CSS.

Таким образом, их использует исключение для посещения, а пользовательские интерфейсы, изменяющие классы / css, не будут влиять на ваш функциональный код, поскольку они не должны изменять атрибуты и наоборот.

Атрибут id должен быть уникальным, иначе всегда выбирается только первый. Поэтому используйте class для группы элементов и перебирайте их для присоединения обработчика события.

<script>
  var video = document.getElementsByClassName('vid');
  // convert the element collection to array using Array.from()
  // for older browser use `[].slice.call()` for converting into array
  // and iterate over the elements to attach listener
  Array.from(video).forEach(function(v) {
    v.addEventListener('ended', function() {
      v.currentTime = 0; // or use `this` to refer the element
      v.load();
    });
  })
</script>

Id должен быть уникальным. Вместо этого вы должны использовать class, а затем использовать 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);
}

Идентификаторы могут использоваться только один раз в документе, и они должны быть уникальными. Вместо этого вы создаете класс, а затем нацеливаете этот класс и запускаете функцию для каждого элемента с этим классом.

Пример дайте им класс = "vid"

<script>

var videos = document.getElementsByClassName('vid');
// When the 'ended' event fires


for (var i = 0; i < videos.length; i++) {
    videos[i].addEventListener('ended', function(){
    // Reset the video to 
    videos[i].currentTime = 0;
    // And play again
    videos[i].load();
   });
}

</script>

Я не уверен, что этот точный код работает с добавлением слушателя событий, но концепция правильная.