循環內的頁面和訪問元素的多部影片 - 使用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我的問題是如何能我確定我在for循環內循環了HTMLcollection，它使我可以訪問HTMLcollection內的所有元素？

Answer 1

在循環添加eventListener之後會發生播放事件......因此i將等於數組的長度，因此您正在訪問未定義的數組元素......最簡單的修正是閉合，在此case an 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]); 
}