JavascriptでaddEventListener（）を使用している問題

Question

私は戦艦ゲームを作っていますが、私は現在自分のボートを置いています。私はクリックすることができるようにしたい、そして色を変えるグリッド上の1つの四角形。私は入れ子になったfor（）ループを通して各タイルにイベントリスナーを追加し、関数が実行されるときに各ボタンを参照するようにしています。

タイルのいくつかは、クリックすると色が変わりますが、他のものは色が変わっていません。また、どのような変更を行うことができますか、できないパターンはありません。 2〜3回、色が変わります。コードはここにあります。 （私はまた、カラーセレクターを追加しました）。

var x_client = 0; 
var y_client = 0; 
var battlefield_client = ""; 

for (y_client = 1; y_client < 11; y_client++) { 
    battlefield_client += "<tr>"; 
    for (x_client = 1; x_client < 11; x_client++) { 
     battlefield_client += "<td onclick = '' class = 'tile' style='border: 3px solid black;' id=" + "cell_client_" + x_client + "_" + y_client + "><pre>  </pre></td>"; 
    } 
    battlefield_client += "</tr>"; 
} 
$(document).ready(function() { 
    $("#tableGrid_client").html(battlefield_client); //loads table 

    for (y_client = 1; y_client < 11; y_client++) { 
     for (x_client = 1; x_client < 11; x_client++) { 
      boatStatusClient = document.getElementById('cell_client_' + x_client + "_" + y_client); 
      boatStatusClient.addEventListener("click", function(){boatGrid.placeBoat_client()}); 
     } 
    } 
    document.getElementById("redButton").addEventListener("click", function(){boatGrid.colorSelect()}); 
    document.getElementById("orangeButton").addEventListener("click", function(){boatGrid.colorSelect()}); 
    document.getElementById("yellowButton").addEventListener("click", function(){boatGrid.colorSelect()}); 
    document.getElementById("greenButton").addEventListener("click", function(){boatGrid.colorSelect()}); 
    document.getElementById("blueButton").addEventListener("click", function(){boatGrid.colorSelect()}); 
    document.getElementById("violetButton").addEventListener("click", function(){boatGrid.colorSelect()}); 
    document.getElementById("brownButton").addEventListener("click", function(){boatGrid.colorSelect()}); 
    document.getElementById("blackButton").addEventListener("click", function(){boatGrid.colorSelect()}); 
}); //This is for the color selector. 

    colorSelect : function() { 
     colorPick = event.target || event.srcElement; 
     colorPick = colorPick.id 
     console.log(colorPick); 
     if (colorPick == redButton) { 
      colorSelect = "red"; 
     } 
     else if (colorPick == orangeButton) { 
      colorSelect = "orange"; 
     } 
     else if (colorPick == yellowButton) { 
      colorSelect = "yellow"; 
     } 
     else if (colorPick == greenButton) { 
      colorSelect = "green"; 
     } 
     else if (colorPick == blueButton) { 
      colorSelect = "blue"; 
     } 
     else if (colorPick == violetButton) { 
      colorSelect = "purple"; 
     } 
     else if (colorPick == brownButton) { 
      colorSelect = "brown"; 
     } 
     else if (colorPick == blackButton) { 
      colorSelect = "black"; 
     } 
     console.log(colorSelect); 
    }, 
    placeBoat_client : function() { 
     var demoColor = "orange" 
     var source_client = event.target.id; 
     console.log(source_client); 
     source_client.id = document.getElementById(source_client.id); 
     document.getElementById(source_client).style.backgroundColor = demoColor; 

    }, 
} 

Answer 1

私はいくつかの修正を適用しています

-Loopsは今反復をカウントするローカル変数を使用するので、ループが実行され、独自の変数を使用しています。次のループは、別のスコープの変数に上書きすることはできません。

- 匿名関数を追加していたのは、関数名が パラメータであると予想されただけでした。 'addEventListener'の2番目のパラメータは、関数名を受け取ったばかりの の呼び出しを設定します。それ以外の場合は冗長です。

- 変数名をselectColor()と異なるように変更しました。

-Functions &スクリプトの上にある変数は、最初に読み込まれるべきものです。

ここで抜け等がセミコロンのような - 小もの、余分なカンマ、括弧、

あなたは、行くことができます願っています：

//var x_client = 0; 
//var y_client = 0; 
var battlefield_client = ""; 
var setColor=''; 

    function colorSelect(){ 
     colorPick = event.target || event.srcElement; 
     colorPick = colorPick.id; 
     console.log(colorPick); 
     if (colorPick == redButton) { 
      setColor = "red"; 
     } 
     else if (colorPick == orangeButton) { 
      setColor = "orange"; 
     } 
     else if (colorPick == yellowButton) { 
      setColor = "yellow"; 
     } 
     else if (colorPick == greenButton) { 
      setColor = "green"; 
     } 
     else if (colorPick == blueButton) { 
      setColor = "blue"; 
     } 
     else if (colorPick == violetButton) { 
      setColor = "purple"; 
     } 
     else if (colorPick == brownButton) { 
      setColor = "brown"; 
     } 
     else if (colorPick == blackButton) { 
      setColor = "black"; 
     } 
     console.log(setColor); 
    } 
    //---end of colorSelect 

    function placeBoat_client() { 
     var demoColor = "orange"; 
     var source_client = event.target.id; 
     console.log(source_client); 
     source_client.id = document.getElementById(source_client.id); 
     document.getElementById(source_client).style.backgroundColor = demoColor; 

    } 




for (var y_client = 1; y_client < 11; y_client++) { 
    battlefield_client += "<tr>"; 

    for (var x_client = 1; x_client < 11; x_client++) { 
     battlefield_client += "<td onclick = '' class = 'tile' style='border: 3px solid black;' id=" + "cell_client_" + x_client + "_" + y_client + "><pre>  </pre></td>"; 
    } 
    battlefield_client += "</tr>"; 
} 
$(document).ready(function() { 
    $("#tableGrid_client").html(battlefield_client); //loads table 

    for (var y_client = 1; y_client < 11; y_client++) { 

     for (var x_client = 1; x_client < 11; x_client++) { 
      boatStatusClient = document.getElementById('cell_client_' + x_client + "_" + y_client); 
      boatStatusClient.addEventListener("click", /*boatGrid.*/placeBoat_client, false); 
     } 
    } 

    document.getElementById("redButton").addEventListener("click", /*boatGrid.*/colorSelect, false); 
    document.getElementById("orangeButton").addEventListener("click", /*boatGrid.*/colorSelect, false); 
    document.getElementById("yellowButton").addEventListener("click", /*boatGrid.*/colorSelect, false); 
    document.getElementById("greenButton").addEventListener("click", /*boatGrid.*/colorSelect, false); 
    document.getElementById("blueButton").addEventListener("click", /*boatGrid.*/colorSelect, false); 
    document.getElementById("violetButton").addEventListener("click", /*boatGrid.*/colorSelect, false); 
    document.getElementById("brownButton").addEventListener("click", /*boatGrid.*/colorSelect, false); 
    document.getElementById("blackButton").addEventListener("click", /*boatGrid.*/colorSelect, false); 

}); //end of ready 

を