Estoy construyendo una Torre Hanoi, pero me encuentro con problemas relacionados con elementos de crianza. Estoy tratando de mover los discos usando eliminar un niño y agregar un niño. Cada torre y disco tiene una ID, pero cuando trato de apuntar a una ID de torre, obtengo una ID de disco.
<body> <article class="container"></article> <section class="towers"> <div class="tower" id="towerOne"> <div class="disk" id="diskOne"></div> <div class="disk" id="diskTwo"></div> <div class="disk" id="diskThree"></div> <div class="disk" id="diskFour"></div> </div> <div class="tower" id="torreTwo"></div> <div class="tower" id="torreThree"></div> </section> <script src="script.js"></script> </body> const container = document.querySelector(".container") const towers = document.querySelectorAll(".tower") const disks = document.querySelectorAll(".disk") let chosenDisc = "" let chosenTower = "" towers.forEach(choice => choice.addEventListener("click", (e) => { chosenTower = e.target.id })) disks.forEach(choices => choices.addEventListener("click", (e) => { chosenDisc = e.target chosenTower.removeChild(chosenDisc) container.appendChild(chosenDisc) }))No puse todas las selecciones de ID allí, solo las clases no demasiado largas, pero son solo el nombre más los números.
La salida más fácil es pedirle a JS un elemento principal de ID de disco como este:
disks.forEach((choice) => choice.addEventListener( "click", (e) => { chosenDisk = e.target.id; chosenTower = e.target.parentElement.id; console.log(chosenDisk, " is in ", chosenTower); }, ) );chosenTower es una cadena y debe convertirlo como elemento , mientras que chosenDisc es un objeto de elemento porque e.target devuelve el objeto de elemento . Puede usar la función querySelector para convertirlo en un elemento como el siguiente
deberías reemplazar
chosenTower = e.target.ida
chosenTower = document.querySelector('#' + e.target.id);