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

Posted 2023-02-19

【中文标题】如何使用 .addEventListener 打印出数组的特定项？

【英文标题】：How to print out the specific item of an array using .addEventListener?

【发布时间】：2019-11-03 15:30:26

【问题描述】：

我正在创建一种井字游戏。我在.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);

它当前打印出“您单击了未定义”。例如，如何让它打印“You clicked topLeft”？

【参考方案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));

【参考方案2】：

对于第一个：更改此行：

grid[i] = document.getElementById(i);

到：

ele = document.getElementById(grid[i]);

因为您需要保存处理程序中每个元素的 i 值，您可以将处理程序更改为：

var clickFunction = function(i) 
    return function(e) 
       console.log("You Clicked " + grid[i]);
    
;

这样，当您附加处理程序 (... clickFunction(i)) 时，您会保存变量的值。

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

var clickFunction = function(i) 
    return function(e) 

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

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

<button id="topLeft">topLeft</button>
<button id="topMid">topMid</button>
<button id="topRight">topRight</button>
<button id="midLeft">midLeft</button>
<button id="midMid">midMid</button>
<button id="midRight">midRight</button>
<button id="botLeft">botLeft</button>
<button id="botMid">botMid</button>
<button id="botRight">botRight</button>