Question

我正在制作战舰游戏，我目前正在制作自己的船只。我希望能够点击，并在网格上的一个方格来改变颜色。我通过嵌套的for（）循环向每个tile添加事件侦听器，并在运行函数时让每个按钮引用自己。

问题是，当我点击它们时，一些瓷砖正在改变颜色，但是其他瓷砖没有，并且没有模式我可以知道哪个更改哪个没有，有时我可以点击两个或三次，它会改变颜色。代码在这里。（我还添加了一个颜色选择器）。

    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'中的第二个参数设置了一个调用接收功能名称，否则是多余的。

更改变量名称，使其与drag不同。

- 功能＆amp;在脚本之上的变量，首先要读取的是。

- 缺少分号，额外逗号，括号等小事。

你走了，希望它有所帮助：

selectColor()

在Javascript中使用addEventListener（）的问题

1 个答案: