Question

我对JS很新，这是我在这里发表的第一篇文章...... 我正在尝试拥有一个图像网格（完全相同），我需要当用户点击其中一个时，执行一个功能。希望我的代码不是一团糟：

cellWidth = 42;
cellHeight = 42;
rownumber = 10;
columnnumber = 15;
leftmargin = 500;
topmargin = 150;

for (var i = 0; i < rownumber; i++) {
    for (var x = 0; x < columnnumber; x++) {
    var cell = new Image();
    cell.src = "black.png";
    cell.style.position = "absolute";
    cell.id = x+"x"+i;
    cell.style.left = x * cellWidth + leftmargin - cellWidth*i;
    cell.style.top = i * cellHeight + topmargin;
    cell.onclick=function(){alert("Hello World")};
    document.body.appendChild(cell);
}   
}

我也试过了cell.addEventListener，但没有发生任何事情。

编辑：不知何故，它碰巧在firefox上正常工作。我的代码或浏览器有问题吗？！？！

Answer 1

它对我有用......问题可能在于您放置脚本的位置。如果您将其放在<head>部分中，它将无法正常工作，因为document.body尚不存在。尝试放在<body>元素的末尾。换句话说：

<head>
    <script>
        // document.body will be null
    </script>
</head>
<body>
    <script>
        // document.body good to go
    </script>
</body>

如果这是问题，您应该看到有关它的控制台日志消息。例如，在Chrome中，如果您将此脚本放在<head>部分中，您将在控制台输出上看到以下错误消息：

Uncaught TypeError: Cannot call method 'appendChild' of null

哪个应该是问题所在的线索。每当您遇到问题总是首先查看控制台：它可能会告诉您确切需要知道的内容。

JS：图像网格和onclick事件

1 个答案: