イベントリスナ

Question

いいので、私は私の髪を失う試合だがやろうとしています何を、一日中、この問題を解決し、常に同じ結果で終わる

をさしようとしていますfirebaseからデータを取得してもうまくいけば、問題は大きなボックスをクリックして、最初のボックスで動作するクリックされたボックスからボタンの値を取得し、他のボックスでは決して動作しないということです。

function gotData(data) { 

    // got data array 
    all = data.val(); 
    var keys = Object.keys(all); 
    if (keys === 'null') { return null;} 
    for (var i = 0; i < keys.length; i++) { 
    var k = keys[i] ; 
    var color1 = all[k].color1; 
    var color2 = all[k].color2; 
    var color3 = all[k].color3; 
    var color4 = all[k].color4; 

    var output = '<div id="ProBox"><div id="myBox" class="bigBox animated fadeIn">'+ 
         '<div class="top">'+ 
         '<div class="box box1" style="background-color: '+ color1 +' "><button id="btnColor1" value="'+ color1 +'"></button></div>'+ 
         '<div class="box box2" style="background-color: '+ color2 +' "><button id="btnColor2" value="'+ color2 +'"></button></div>'+ 
         '</div>'+ 
         '<div class="bootom">'+ 
         '<div class="box box3" style="background-color: '+ color3 +' "><button id="btnColor3" value="'+ color3 +'"></button></div>'+ 
         '<div class="box box4" style="background-color: '+ color4 +' "><button id="btnColor4" value="'+ color4 +'"></button></div>'+ 
         '</div>'+ 
        '</div></div>'; 

    body.innerHTML += output; 

    var ProBox = document.getElementById('ProBox'); 

    Array.prototype.forEach.call(ProBox.children , function(box){ 
     box.addEventListener('click' , function(){ 
      console.log(this); 
     }) 
    }); 

    } 
    // end data array 


}; 

任意のヘルプは歓声に

Answer 1

に感謝私はboxsのすべてを選択するにはquerySelectorAllを買い、固定して、forループとそれらへのループと、それはすべての子供にあなたのforeach反復処理しているあなたは確か