Looping нескольких видео на странице и доступ к элементам внутри - Javascript

Question

Я следующий сценарий, который возвращает все video элементов на данной странице:

var amountWatched = ''; 

var video = document.getElementsByTagName("video"); 

console.log(video); // Returns HTMLCollection 

for(var i = 0; i < video.length; i++){ 

    console.log(video[i]); 

    video[i].addEventListener('playing', function(){ 
    var mytimer = setInterval(function(){ 

    console.log(video[i]); 

    console.log(video[i].children[0].outerHTML); // Currently undefined 


    }, 300); 
    }) 
} 

Мы Bascially настройку playing события, которое позволит нам доступ к просмотренному percentage и т. д. вместо того, чтобы иметь несколько сценариев для нескольких видеороликов.

Теперь первый console.log возвращает мне следующее:

Что я и следовало ожидать, я могу затем перейти в каждую запись и получить доступ к данной переменной, что я требую.

Однако, когда мы находимся внутри цикла for и я console.log(video[i]); вижу следующее:

Теперь вопрос, когда я пытаюсь получить доступ к children я получаю ошибку undefined мой вопрос, как может Я уверен, что я петлю HTMLcollection в цикле for, который дает мне доступ ко всем элементам внутри HTMLcollection?

Answer 1

Событие воспроизведения произойдет после цикла, который добавляет eventListener ... поэтому i будет равно длине массива, поэтому вы получаете доступ к неопределенному элементу массива ... Простейшее исправление - это замыкание, в этом case a IIFE

var amountWatched = ''; 

var video = document.getElementsByTagName("video"); 

console.log(video); // Returns HTMLCollection 

for(var i = 0; i < video.length; i++){ 
    (function(vid) { 
     console.log(vid); 
     vid.addEventListener('playing', function(){ 
      var mytimer = setInterval(function(){ 
       console.log(vid); 
       console.log(vid.children[0].outerHTML); // Currently undefined 
      }, 300); 
     }); 
    })(video[i]); 
}