Cómo utilizar el bucle for de Javascript para crear botones y llamar a una función al hacer clic en ellos.
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);
};
}
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 variablebtnElement
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: