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

我们基本上正在设置一个播放事件，这将允许我们访问观看的百分比等，而不是为多个视频使用多个脚本。

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

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

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

现在的问题是，当我尝试访问 children 时，我收到错误 undefined 我的问题是如何确保循环 HTMLcollection for 循环中的 code> 允许我访问 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]);
}