Este es un código javascript simple. Estoy creando 5 divs en script y relleno un evento 'onclick' para cada uno. Sin embargo, todos me dan la identificación del último. ¿Alguna idea de por qué ocurre este comportamiento? Muchas gracias.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test Page</title> <style type="text/css"> .divImgPoint { float: left; border-radius: 50%; width: 15px; height: 15px; margin-left: 5px; margin-right: 5px; border: ridge 2px #c73756; } .divTest { position: absolute; width: 100px; height: 100px; top: 200px; left: 100px; border: 1px solid red; } </style> <script type="text/javascript"> function createNewDivs() { var divFixed = document.getElementById('divFixed'); var newDiv; for (xI = 0; xI < 5; xI++) { newDiv = document.createElement('div'); newDiv.id = "newDiv_" + xI; newDiv.className = "divImgPoint"; newDiv.onclick = () => { alert(newDiv.id + " | " + xI); } divFixed.appendChild(newDiv); } } </script> </head> <body> <div id="divFixed"> </div> </body> </html> <script type="text/javascript"> window.addEventListener('load', () => { createNewDivs(); }); </script>Poner let newDiv; bucle interior.
Me gusta
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test Page</title> <style type="text/css"> .divImgPoint { float: left; border-radius: 50%; width: 15px; height: 15px; margin-left: 5px; margin-right: 5px; border: ridge 2px #c73756; } .divTest { position: absolute; width: 100px; height: 100px; top: 200px; left: 100px; border: 1px solid red; } </style> <script type="text/javascript"> function createNewDivs() { var divFixed = document.getElementById('divFixed'); for (xI = 0; xI < 5; xI++) { let newDiv; newDiv = document.createElement('div'); newDiv.id = "newDiv_" + xI; newDiv.className = "divImgPoint"; newDiv.onclick = () => { alert(newDiv.id + " | " + xI); } divFixed.appendChild(newDiv); } } </script> </head> <body> <div id="divFixed"> </div> </body> </html> <script type="text/javascript"> window.addEventListener('load', () => { createNewDivs(); }); </script>