Quiero escribir un código en JavaScript, que obtendrá la identificación de un elemento (en mi caso, al hacer clic en la tabla. cada <td> tiene su propia identificación), y luego de usar esta identificación, quiero acceder al elemento correspondiente en Array. Tantos intentos pero sin éxito. A continuación se muestra mi código, por favor, ayúdame a entender lo que estoy haciendo mal. que puedo hacer para arreglarlo? :(
const items = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6],[1, 4, 7],[2, 5, 8]]; let cells = document.querySelectorAll(".cell"); function findIndex() { let index; for (let i = 0; i < cells.length; i++) { cells[i].addEventListener("click", function (e) { index = Number(e.target.id); }); } return index; } console.log(items[findIndex()]);Escribiste el oyente para hacer clic. La función dentro de eventListener se llamará solo después de hacer clic en la celda de la tabla específica. A continuación, publiqué el ejemplo en el que, después de hacer clic, accedo e inicio sesión en la consola con un valor correspondiente de la matriz.
Entonces, así es como debe acceder a sus items[Number(event.target.id)] y prestar atención a que se ejecutará solo después de hacer clic en la celda.
const items = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8] ]; document.querySelectorAll('.cell').forEach((currentElement) => { currentElement.addEventListener("click", function(event) { console.log(items[Number(event.target.id)]); }) }); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Solution</title> </head> <body> <table> <tr> <td id="0" class="cell">Row 1</td> <td id="1" class="cell">Row 2</td> <td id="2" class="cell">Row 3</td> </tr> <tr> <td id="3" class="cell">Row 4</td> <td id="4" class="cell">Row 5</td> <td id="5" class="cell">Row 6</td> </tr> </table> </body> </html>