鼠標懸停事件不起作用（vanilla Javascript）

Question

我想做一個戰艦游戲，但在 Javascript 中的mouseover事件有問題。 我想制作一個 function，當鼠標懸停在該元素上時，它會將元素的文本內容更改為“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 循環不正確。 中間部分是被檢查為真/假的部分，最后一部分在每次迭代時運行（部分由分號分隔）。

嘗試將其從for(var i=0; i++; i<gridShips.length)更改for(var i=0; i<gridShips.length; i++)

Answer 2

您可以使用for...of循環，因為您不需要索引。

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

Answer 3

javascript 中的循環標准是：

for（初始化器；停止條件；增量）{...}

如

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

但是，也許我誤解了您要完成的工作，但我認為您想收聽單擊事件。 因為玩家需要 select 在輪到他們的戰艦上攻擊。 否則，當您將鼠標移到棋盤上時，您的回合就會用完，它會攻擊您首先將鼠標懸停在哪個方格上。