2016-10-20 4 views
0

多くの再生ボタンからIDを取得するにはどうすればよいですか?どのようにaddEventListenerの要素のIDを渡すことができますか?

私は注文を警告するときに最後の要素を取得します。私が最後にような何かしたい

:代わりに

video.play(); 

window.addEventListener("load", function(event) { 
 
\t var videos = document.getElementsByTagName("video"); 
 
\t var btnsPlay = document.getElementsByClassName("btnPlay"); 
 
\t 
 
\t \t for (var i = 0; i < videos.length; i++) 
 
\t \t { 
 
\t \t \t var video = videos[i]; 
 
\t \t \t var btnPlay = btnsPlay[i]; 
 
\t \t \t // … find button objects and add listener … 
 
\t \t \t btnPlay.addEventListener("click", function (event) { 
 
\t \t \t var id = i; 
 
\t \t \t video.play(); 
 
\t \t \t alert(id); 
 
\t \t }); // … 
 
\t } 
 
});
<!DOCTYPE HTML> 
 
<html lang="de"> 
 

 

 
<head> 
 
    <meta charset="utf-8"> 
 
</head> 
 

 
<body> 
 
<video width="20%" height="240" controls> 
 
    \t \t <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
 
    \t  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
 
    \t \t <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> 
 
\t \t <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp> 
 
\t \t Your browser does not support the video tag. 
 
</video> 
 
<div class ="controlbtn"> 
 
    <button class="btnPlay">Play</button> 
 
</div>  
 

 
<video width="20%" height="240" controls> 
 
    \t \t <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
 
    \t  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
 
    \t \t <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> 
 
\t \t <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp> 
 
\t \t Your browser does not support the video tag. 
 
</video> 
 
<div class ="controlbtn"> 
 
    <button class="btnPlay">Play</button> 
 
</div>  
 

 
    <video width="20%" height="240" controls> 
 
    \t \t <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
 
    \t  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
 
    \t \t <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> 
 
\t \t <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp> 
 
\t \t Your browser does not support the video tag. 
 
</video> 
 
<div class ="controlbtn"> 
 
    <button class="btnPlay">Play</button> 
 
</div>  
 
    
 
     </body> 
 
</html>

+0

[ループ内のJavaScriptクロージャー - 簡単な実用例](http://stackoverflow.com/questions/750486/) javascript-closure-inside-loops-simple-practical-example) – Xufox

答えて

1

videos[id].play(); 

を変更してみてください関数が呼び出されているとき iの値が既に変更されたため、この問題が起こっている

for (let i = 0; i < videos.length; i++) 

に理由があります。関数スコープレベルではなくブロックスコープレベルで保存するには letを使用する必要があります

関連する問題