鼠标悬停事件不起作用（原版 Javascript）

Question

我想制作一款战舰游戏，但 Javascript 中的 mouseover 事件有问题。我想制作一个函数，当鼠标悬停在这个元素上时，将元素的文本内容更改为“X”。

Javascript:

var gridShips = document.querySelectorAll('.ships');

for(var i=0; i++; i<gridShips.length){
    gridShips[i].addEventListener('mouseover', function(e){placeShips(e)}, false);
}
function placeShips(e){
e.target.textContent = 'X';

}

但是当我将鼠标移到这个元素上时，没有任何变化。只有当我单击此元素时，文本内容才会更改为 'X'。不知道哪里出了问题

Answer 1

您的 for 循环似乎不正确。中间部分是被检查为 true/false 的部分，最后一部分是每次迭代运行（以分号分隔的部分）。

尝试将其更改为 for(var i=0; i++; i<gridShips.length) 至 for(var i=0; i<gridShips.length; i++)

Answer 2

javascript 中的标准 for 循环是：

for ( 初始值 ; 停止条件 ; 增量 ) { ... }

比如

for ( 让 i = 0; i < gridShips.length; i++ ) { ... }

然而，也许我误解了你想要完成的事情，但我认为你想听点击事件。因为玩家需要 select 一块方块才能在他们的回合中攻击战舰。否则，当您将鼠标移到棋盘上时，您的回合就会用完，它会攻击您首先将鼠标悬停的方格。

Answer 3

您可以使用 for...of 循环代替，因为您不需要索引。

for(const ship of gridShips){
    ship.addEventListener('mouseover', function(e){placeShips(e)}, false);
}

鼠标悬停事件不起作用（原版 Javascript）

Mouseover event don't work (vanilla Javascript)

javascript

dom-events