在页面上循环多个视频并访问内部元素 - 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);
  })
}

我们基本上设置playing活动，允许我们访问percentage观看的内容，而不是为多个视频制作多个脚本。

现在第一个console.log返回以下内容：

这是我所期望的，然后我可以导航到每个条目并访问我需要的给定变量。

但是当我们进入for循环并且我console.log(video[i]);时，我会看到以下内容：

现在的问题是，当我尝试访问children时，我收到了错误undefined我的问题是如何确保我在HTMLcollection内循环for循环让我可以访问HTMLcollection内的所有元素？

Answer 1

播放事件将在添加eventListener的循环之后发生...因此i将等于数组的长度，因此您正在访问未定义的数组元素...最简单的修复是一个封闭，在这种情况下是一个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]);
}