- Javascriptを

Question

は

私は、特定のページ上のすべてのvideoの要素を返す次のスクリプトをしている：私たちはbascially playingイベントを設定している

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); 
    }) 
} 

に私たちのためにできるようになります複数の動画の複数のスクリプトを使用する代わりに、視聴したpercentageにアクセスしてください。

私が期待するものです

​​

、私はその後、各エントリに移動し、私が必要と与えられた変数にアクセスすることができます。

は今、最初console.logは、次の私を返します。

我々はforループとI console.log(video[i]);内にあるとき、しかし、私は以下を参照してください。

私はエラーがundefined私の質問はどのようにすることができますされ得るchildrenにアクセスしようとすると、今問題があります私は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]); 
}