Estoy trabajando en un proyecto en el que el usuario decide cuántos botones hay y luego cada botón activa una función diferente.
Lo que hice es: tengo una entrada que pide "Ingrese la cantidad de botones" y un botón "Enviar". Cuando se hace clic en el botón "Enviar", el valor de la variable n se establece en el valor definido por el usuario.
Luego tengo el siguiente código (suponiendo que el usuario haya establecido n en 10):
for (i = 0; i < 10; i++) { var x = document.createElement('div'); x.id = i; x.innerHTML = i; x.onclick = function() {alert(i)}; document.body.appendChild(x); } Lo que quiero es que cuando se haga clic en div con id i , el mensaje emergente diga i . Pero lo que terminó sucediendo es que no importa en qué div haga clic, el mensaje emergente siempre dice 10 .
¿Por qué está pasando esto? ¿Cómo arreglar esto?
Lo único que necesita cambiar es la asignación de i dentro del ciclo for. Utilice let para definir una variable de ámbito local. Además, use textContent en lugar de innerHTML para texto simple. Se recomienda usar const / let en lugar de var .
for (let i = 0; i < 10; i++) { const x = document.createElement('div'); x.id = i; x.textContent = i; x.onclick = function() { alert(i) }; document.body.appendChild(x); }Puede usar getAttribute para leer la identificación de los elementos. Te muestro un ejemplo:
for (i = 0; i < 10; i++) { var x = document.createElement('div'); x.id = i; x.innerHTML = i; x.onclick = function(e) { let dataId= e.currentTarget.getAttribute("id") alert(dataId) }; document.body.appendChild(x); } getAtrribute() devuelve el valor de un atributo html como una cadena, simplemente ingrese el nombre del atributo entre llaves para obtener el valor. En este caso, ingresé "id", que es el valor que queremos recuperar.
Además, para obtener el valor del elemento en el que hace clic, uso currentTarget para recuperar con precisión el valor del div que crea la iteración. Si usa target y dentro del div tiene más elementos, este código generará un error. Por lo tanto, es importante utilizar currentTarget para esta aplicación.
Al iterar sobre sus elementos de NodeList, puede tomar este próximo enfoque. En primer lugar, agregue todos sus divs creados en su HTML y continúe recorriendo la lista de elementos por document.querySelectorAll("div")
De esa manera, selecciona todos los elementos y luego asigna un addEventListener a cada uno de los elementos. En su función de alert , imprima this.id y le devolverá el número de identificación del elemento que corresponde a su índice i .
También sería lo mismo si solo coloca la función addEventListener completa dentro del otro ciclo.
Acabo de separar ambos para que puedas entenderlo mejor.
for (i = 0; i < 10; i++) { var x = document.createElement('div'); x.id = i; x.innerHTML = i; document.body.appendChild(x); } let divs = document.querySelectorAll("div"); for(var a= 0; a < divs.length; a++){ divs[a].addEventListener("click", function(){ alert(this.id); }); }