Question

我已经坚持了好几天了。

我有一个JavaScript函数，可以在每个td元素中创建一个包含100个图像的10x10表。在创建这些图像时，我使用其ID号参数向它们添加一个onclick事件监听器。单击这些图像后，它们应弹出一个警报，其内容中包含其ID号。但是，警报消息显示“[对象MouseEvent]”。我不知道是什么原因引起的。我一直在搜索w3schools，stackoverflow和其他博客，但到目前为止还没有太大的成功。

这是JS代码：

function orbClicked(orb) {
    alert(orb);
}

function initField() {
    var table = document.getElementById("gameField");

    for (var i = 0; i < 10; i++) {
        var tr = document.createElement("tr");

        for (var j = 0; j < 10; j++) {
            var td = document.createElement("td");
            var orbNumber = i * 10 + j;

            var orbImage = document.createElement("img");
            orbImage.setAttribute("src", "images/orb_empty.png");
            orbImage.setAttribute("id", "orb" + orbNumber);
            orbImage.addEventListener("click", function(orbNumber) {orbClicked(orbNumber)}, false);

            td.appendChild(orbImage);
            tr.appendChild(td);
        }

        table.appendChild(tr);
    }
}

提前感谢您的帮助！

Answer 1

function orbClicked(orb) {
alert(orb);

}

function initField（）{ var table = document.getElementById（“gameField”）;

for (var i = 0; i < 10; i++) {
    var tr = document.createElement("tr");

    for (var j = 0; j < 10; j++) {
        var td = document.createElement("td");
        var orbNumber = i * 10 + j;

        var orbImage = document.createElement("img");
        orbImage.setAttribute("src", "images/orb_empty.png");
        orbImage.setAttribute("id", "orb" + orbNumber);
        orbImage.addEventListener("click", function() {orbClicked(this.id)}, false);

        td.appendChild(orbImage);
        tr.appendChild(td);
    }

    table.appendChild(tr);
}

}

不要在运行时函数（回调）中传递id变量，因为它在运行时不可用。只需在运行时获取id并传递，所以“this.id”将给出点击图像的id。

将相同的事件侦听器添加到具有不同参数的多个元素

1 个答案: