ループ内でイベントハンドラが正しく動作しない

Question

私はfoorループ経由でhtml要素にいくつかのクラスを適用しようとしています。問題は、ループ変数が正しく動作しないことです。

'use strict' 

    window.onload = function(){ 
    var elements = document.getElementsByTagName("div") 

    for(var i = 0; i < elements.length; i++){ 
     elements[i].addEventListener("click", a(this, i), false) 
    } 

    function a(e, x){ 
     if(!e.className){ 
     e.className = "class".concat(x) 
     } 
     else { 
     e.classList.remove(e.className) 
     } 
    } 
    } 

div{ 
    background-color: red; 
    } 

    .class0{ 
    background-color: blue; 
    } 

    .class1{ 
    background-color: purple; 
    } 

Answer 1

@Patrickはこれを行う示唆したように：

window.onload = function(){ 
    var elements = document.getElementsByTagName("div") 

    for(var i = 0; i < elements.length; i++){ 
     elements[i].addEventListener("click", a.bind(window, elements[i],i), false) 
    } 

    function a(e, x){ 
     if(!e.className){ 
     e.className = "class".concat(x) 
     } 
     else { 
     e.classList.remove(e.className) 
     } 
    } 
    } 

あなたが関数Aを呼び出し、イベントハンドラとしてその結果を割り当てました。

バインドを使用すると、aを呼び出す関数を作成し、要素とインデックスを引数として渡します。