dom - Javascript pasa la identificación del elemento dinámico al controlador de eventos

CorePress2023-11-30  1

Tengo JS que crea elementos dinámicos. Quiero agregar eventos onclick a estos elementos y pasar el ID del elemento que llama al controlador de eventos para poder usar JS para cambiar el texto del elemento en el que se hace clic.

Lo hago haciendo algo como esto dentro de un bucle:

 var btnID = "button-" + x; // unique id for changing element inside of test()

 /* desired result is <button onclick="test(<runtime value of btnID>)"></button> */
 buttonElement.onclick = function () { test(btnID)  };

Desafortunadamente, el resultado es que cada elemento del botón pasa el btnID del último elemento en el bucle a test(). ¿Alguien puede explicar por qué sucede esto?

https://jsfiddle.net/j519rbyn/1/



------------------------

Entonces, en el código anterior, lo que sucede es que el evento de clic ocurre en el futuro dentro delvez que se ejecutó el bucle for, es por eso que obtienes el último valor que se ejecutó en x. Por lo tanto, obtenemos cada vez el botón-2 como texto. El valor 3 no aparecerá ya que se interrumpe en la condición del bucle for.

Entonces, para evitar este problema, puedes usar IIFE, que se llama expresión de función inmediatamente invocada.

En tu fragmento de código, encontré dos cosas basadas en el jsfiddle que agregaste.

Primero si estás intentando poner un texto en el botón, debería ser internalHTML, no internalTest.

El segundo es el problema que se muestra a continuación: puedes evitarlo usando IIFE.

function bootstrap() {
  var parentContainer = document.getElementById("parent");

  for (var x = 0; x < 3; x++) {
    var buttonElement = document.createElement("button");
    buttonElement.innerHTML = "click me " + x;
    (function() {
      var j = "button-" + x
      buttonElement.onclick = function() {
        test(j)
      }
    })()

    parentContainer.appendChild(buttonElement);
  }

}

function test(elementID) {
  alert(elementID);
}

bootstrap()
<div id="parent">


</div>

Espero que tengas una idea clara sobre esto.

2
  • Muchas gracias. Había sospechado la causa, ¡pero no se me ocurrió ninguna alternativa! ingenioso Asistente turgente 6 de junio de 2020 a las 19:06
  • Bienvenido a Turgid. Estaremos encantados de ayudarle a votar si solucionó su problema. Por lo que será útil para otros como referencia futura.
Su guía para un futuro mejor - libreflare
Su guía para un futuro mejor - libreflare