Creé un bucle con botones en él. También creé un eventListener que lleva la cuenta de cada botón. Quiero que suceda algo cuando todos los botones se hayan presionado al menos 3 veces, así que creé una instrucción if que verifica si el conteo es 3 y agrega 1 a otro conteo, pero el otro conteo permanece en 1 incluso si se presionaron varios botones. 3 veces.
for (let i = 0; i < 7; i++) { let btn = document.createElement('button'); btn.classList.add('buttons'); btn.id = 'button' + i; document.getElementById('box').appendChild(btn); let count = 0; let count2 = 0; btn.addEventListener('click', () => { count++; console.log(count); if (count === 3) { console.log('3'); count2++; console.log(count2); } else { console.log('not 3'); } }); } #box button { min-width: 20px; min-height: 20px; } .as-console-wrapper { max-height: 87%!important; } body { margin: 0; } <div class="box" id="box"> </div>Entonces, la variable de conteo funciona bien, y cuando se ha hecho clic en el botón 1 3 veces, la variable de conteo 2 cambia a 1, pero permanece en 1 y parece que no puedo averiguar por qué. Al final count2 debe ser 7, porque hay 7 botones.
como Vladimir dio a entender en los comentarios, es un problema de alcance.
El recuento variable solo se declara dentro del detector de eventos, por lo que más adelante, cuando presiona un botón diferente, su código count++ para una variable de recuento diferente.
Para resolver esto, declare var count en lugar de let count , eso lo hará global.
O declare la variable de conteo antes del bucle for .
Por cierto: asegúrese de dejar de actualizar el count cuando llegue a 3, ya que no actualizará count2 si llega a 4 o más.
Además de todos los comentarios que ya señalaron el problema del OP, sugiero un enfoque diferente basado en el almacenamiento/actualización de recuentos de botones individuales dentro de una instancia de Map .
Con la introducción de la delegación de eventos en la parte superior, uno eliminaría múltiples controladores de eventos aplicados sobre la marcha (para cada botón creado dinámicamente), lo que obliga al enfoque a tratar con diferentes alcances de contador (alcance del controlador y el alcance for bloque).
Habrá exactamente un solo controlador suscrito una vez al evento 'click' de un solo nodo principal. Este controlador realiza un seguimiento y maneja los diversos estados de recuento de clics al buscar un recuento de clics individual de botones.
function createButton(id) { let elmNode = document.createElement('button'); elmNode.classList.add('buttons'); elmNode.id = `button${ id }`; return elmNode; } function main() { // keeps track of and handles the various click count states. function handleButtonClick({ target }) { const btnNode = target.closest('button'); // update a single buttons click count total. const buttonClickTotal = clickCountStorage.get(btnNode) + 1; clickCountStorage.set(btnNode, buttonClickTotal); const clickCountList = Array .from( clickCountStorage.values() ); // calculate click count total of all buttons. const allButtonsClickTotal = clickCountList .reduce((total, count) => total + count, 0); // check whether the OP's each button minimum 3 times click applies. const isEveryButtonHasBeenClickedAtLeastThreeTimes = clickCountList .every(count => count >= 3); console.log({ buttonClickTotal, allButtonsClickTotal, isEveryButtonHasBeenClickedAtLeastThreeTimes, }); } const clickCountStorage = new Map; const root = document.querySelector('#box'); // make use of event delegation ... // - a single eventhandler subscribed once to // a single parent node's 'click' event. root.addEventListener('click', handleButtonClick) for (let elmNode, i = 0; i < 7; i++) { elmNode = createButton(i); // establish a new button reference related click count. clickCountStorage.set(elmNode, 0); root.appendChild(elmNode); } } main(); #box button { min-width: 20px; min-height: 20px; } .as-console-wrapper { max-height: 87%!important; } body { margin: 0; } <div class="box" id="box"> </div>