Estoy haciendo un juego de ajedrez como un proyecto divertido. La forma en que lo tengo configurado implica una variable por cuadrado, lo que me lleva 64 líneas de código en este momento.
El nombre de la variable debe ser el mismo que el ID.
Mi código actual:
const a1 = document.getElementById('a1'); const a2 = document.getElementById('a2'); const a3 = document.getElementById('a3'); const a4 = document.getElementById('a4'); const a5 = document.getElementById('a5'); const a6 = document.getElementById('a6'); const a7 = document.getElementById('a7'); const a8 = document.getElementById('a8');(Continúa por 7 juegos más de 8)
Todavía no he probado nada más porque no sé por dónde empezar.
¿Hay algún método para acortar esto? ¡Gracias por adelantado!
Para responder directamente a su pregunta: use un bucle y agregue todos los datos a una matriz:
const board = [...new Array(64)].map((_, i) => document.getElementById("a" + i));Y puedes acceder a cada elemento como:
board[3]; board[32];y así sucesivamente, pero nunca estructuraría mi HTML de esa manera con tantos ID.
Una mejor manera sería simplemente consultar el elemento principal y obtener sus elementos secundarios, algo como:
<div id="board"> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> ... </div>Luego, en tu JavaScript podrías hacer:
const board = document.getElementById("board").children;y boom, todo está configurado para ti:
board[0]; board[77]; board[5]; // yay // eg listen for clicks on any square board.forEach((square, i) => square.addEventListener("click", e => { console.log(`You clicked square #${i}!`); }));