Estoy tratando de hacer un tablero de ajedrez y no puedo mover las piezas. mi función 'moving_pieces' no funciona como se esperaba y no sé por qué. aquí está la función.
function moving_pieces() { //getting pieces ids let images = document.querySelectorAll('img'); let target_piece = null; images.forEach(img => { img.addEventListener('click', function handle_move () { target_piece = img; console.log(img) //for debugging }); }); //getting squares ids let squares = document.querySelectorAll('.square'); let target_square = null; squares.forEach(square => { square.addEventListener('click', function handle_id() { if (!square.firstChild) { target_square = square; console.log(square) //for debugging } }); }); target_square.appendChild(target_piece); }para futuros lectores.
EDITAR: edité mis ámbitos variables y ahora está bien, pero las piezas aún no se mueven.
EDIT 2: encontré el problema. tengo que poner target_square.appendChild(target_piece); dentro de squares.forEach y funciona muy bien, feliz codificación :)
lo que estoy tratando de hacer es obtener la identificación de la pieza y la identificación del cuadrado y luego agregar la pieza en ese cuadrado. logré obtener las identificaciones pero la pieza no se mueve.
Parece que estás declarando target_square and target_piece dentro de los bucles. Intente mover la declaración fuera de los bucles. Como esto:
function moving_pieces() { //getting pieces ids let images = document.querySelectorAll('img'); let target_piece = null; images.forEach(img => { img.addEventListener('click', function handle_move () { target_piece = img; console.log(img.parentElement) //for debugging }); }); //getting squares ids let squares = document.querySelectorAll('.square'); let target_square = null; squares.forEach(square => { square.addEventListener('click', function handle_id() { if (!square.firstChild) { target_square = square; console.log(square) //for debugging } }); }); target_square.appendChild(target_piece); }Creé un ejemplo lejos de ser perfecto sobre cómo mover un elemento a un nuevo cuadrado. En mi caso, es solo una 'X' y el código está lejos de estar completo para lo que necesita, pero podría brindarle algunas ideas :)