在Javascript中使用addEventListener（）出现问题

Question

I am making a battleships game, and I am currently working on placing your own boats. I want to be able to click, and one square on the grid to change color. I am adding event listeners to each tile through a nested for() loop, and getting each button to reference itself when the function is run.

The issue is, some of the tiles are changing color when I click on them, but others are not, and there is no pattern I can make out as to which change and which do not, as sometimes, I can click two or three times, and it will change color. The code is here. (I also added a color selector).

    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

I have applied some fixes:

-Loops now use local variables to count iteration, so loop runs and uses its own variable. Next loop is not allowed to write over a variable in a different scope.

-You were adding anonymous functions were just function names were expected as parameters. The second parameter inside an 'addEventListener' sets a call just receiving function name, otherwise it is redundant.

-Changed a variable name to make it different from selectColor() .

-Functions & variables on top of script, so are the first thing to be read.

-Small things like missing semicolons, extra commas, brackets, etc.

Here you go, hope it helps:

//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