Estoy agregando divs en los clics de los usuarios. Si el usuario hace clic en un div emocionante, quiero que cambie de color. Sin embargo, de alguna manera, el div afectado es siempre el último agregado. ¿Cómo puedo hacer que el div presionado sea el afectado?
document.addEventListener('click', e =>{ el=document.createElement('div') document.body.appendChild(el) el.style.left = e.clientX-25 + 'px' el.style.top = e.clientY-25 + 'px' el.addEventListener('click', e =>{ el.style.backgroundColor = 'green' }) }) div { width:50px; height:50px; background-color:blue; border: 1px solid black; position:absolute; } <html> <body> click to make two different squres. then click again on the first squre you created. </body> </html>intente ejecutar este código, haga clic para crear dos cuadrados, luego haga clic nuevamente en su primer cuadrado. ¿Por qué el segundo cambiaría de color?
Estás creando implícitamente una variable global llamada el aquí:
el=document.createElement('div')Cuando hace clic en un cuadrado, el detector de clics se ejecutará y hará lo siguiente:
el.style.backgroundColor = 'green' Esto buscará a qué hace referencia actualmente el y cambiará su estilo. Pero el es global y se reasigna cada vez que se produce un clic (y se crea un cuadrado). Por lo tanto, cada vez que haga clic en cualquiera de los cuadrados, el último cuadrado creado siempre será el que cambie su estilo.
Declare el para que solo esté en el ámbito de la función, en lugar de global.
document.addEventListener('click', e => { const el = document.createElement('div') document.body.appendChild(el) el.style.left = e.clientX - 25 + 'px' el.style.top = e.clientY - 25 + 'px' el.addEventListener('click', e => { el.style.backgroundColor = 'green' }) }) div { width: 50px; height: 50px; background-color: blue; border: 1px solid black; position: absolute; } <html> <body> click to make two different squres. then click again on the first squre you created. </body> </html>Recomiendo encarecidamente usar ESLint y su regla de no indefinición para evitar cometer este tipo de errores.
También es posible que desee no crear un cuadrado si está haciendo clic en un cuadrado existente; en su lugar, solo cambie el color del cuadrado existente. Si eso es lo que desea, evite que el evento se propague.
document.addEventListener('click', e => { const el = document.createElement('div') document.body.appendChild(el) el.style.left = e.clientX - 25 + 'px' el.style.top = e.clientY - 25 + 'px' el.addEventListener('click', e => { // don't let the event bubble up to the click listener above e.stopPropagation(); el.style.backgroundColor = 'green' }) }) div { width: 50px; height: 50px; background-color: blue; border: 1px solid black; position: absolute; } <html> <body> click to make two different squres. then click again on the first squre you created. </body> </html>