javascript - 如何使用 .addEventListener 打印出数组的特定项？

Question

我正在创建一种井字游戏。我在 .html 中绘制了一个网格，我试图让每个框在按下时说“你点击了‘框位置’”。

元素 ID 的标记为 0-8。

let grid =['topLeft','topMid','topRight','midLeft','midMid','midRight','botLeft','botMid','botRight'];

var clickFunction = function() {

    console.log("You Clicked " + grid[i]);  
};

for(i=0; i<grid.length; i++) {
    grid[i] = document.getElementById(i);
    grid[i].addEventListener("click", clickFunction);
}

它目前打印出“你点击了未定义”。例如，如何让它打印“您单击了左上角”？

Answer 1

将索引传递给clickFunction

var clickFunction = function(i) {

console.log("You Clicked " + grid[i]);  
};

for(i=0; i<grid.length; i++) {
  grid[i] = document.getElementById(i);
  grid[i].addEventListener("click", () => clickFunction(i));
}