es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo utilizar el bucle for de Javascript para crear botones y llamar a una función al hacer clic en ellos.

Cómo utilizar el bucle for de Javascript para crear botones y llamar a una función al hacer clic en ellos.

26 May, 2023 Programación

He podido crear los botones usando el bucle “for”, pero al hacer clic en un botón, toma el último valor en la lista de arreglos ¿Por qué?

//lista de estilos de propiedad de barra lateral para usar para crear los botones
for (var i = 0; i < propertySidebarItem.styles.length; i++) {
//estilo de propiedad actual a usar
var style = propertySidebarItem.styles[i];
//crear el botón usando el estilo actual
var btnElement = document.createElement('button');
btnElement.className = 'btn ' + element.tagName + style.name;
//al hacer clic en cualquier botón, mostrar las propiedades del botón
btnElement.onclick = function () {
//en esta etapa estoy obteniendo el último valor en el array de estilos de propertySidebarItem
console.log(btnElement);
};
}

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema es que estás usando la misma variable btnElement para cada iteración del bucle. Esto significa que cuando hagas clic en cualquiera de los botones, la variable btnElement siempre se referirá al último botón creado en el bucle. Para solucionar esto, puedes crear una nueva variable para cada iteración del bucle, de esta manera:

    //lista de estilos de propertySidebarItem para crear los botones
for (var i = 0; i < propertySidebarItem.styles.length; i++) {
  //estilo de la propiedad actual para usar
  var style = propertySidebarItem.styles[i];
  //crear el botón usando el estilo actual
  var btnElement = document.createElement('button');
  btnElement.className = 'btn ' + element.tagName + style.name;
  //cuando se haga clic en cualquier botón, mostrar las propiedades del botón
  btnElement.onclick = function (btnElement) {
    //crear una nueva variable para cada iteración del bucle
    var currentBtnElement = btnElement;
    console.log(currentBtnElement);
  };
}

Comments are closed.