El problema no tiene nada que ver con el alcance. Tiene que ver con el tiempo. Esa última parte de su código solo se ejecuta una vez, antes de que el intervalo se ejecute veinte veces.

Este es el orden de las operaciones:

1. Inicializar second a 20 .
2. Vincule la función de cuenta regresiva a window.onload . (Esto aún no se ejecuta)
3. Compruebe si seconds es mayor que 0 , y es porque los intervalos aún no se han ejecutado. Esta es la única vez que se ejecuta este código.
4. se activa window.onload y comienza la cuenta atrás
5. un segundo después, ahora son 19 seconds
6. 19 segundos más tarde seconds no es 0 , y el intervalo se borra.

Entonces, lo que debe hacer es activar su código en cada iteración del intervalo .

Quieres algo más cercano a:

 let second = 20; window.addEventListener("load", function () { const myinterval = setInterval(function () { second--; // other logic here... if (second > 0) { countdownTick(); // runs every second with the interval handler } if (second == 0) { clearInterval(myinterval); // cleanup } }, 1000); }); function countdownTick() { // Do the stuff you need to do each second here }

Podría poner el if (segundo > 0) dentro de la función de clic de esa manera verificará el valor más reciente de segundo en lugar de solo una vez en la carga como tal

 for(let i = 0; i < imposters.length; i++){ imposters[i].addEventListener("click", function () { if (second > 0) { let count = 0; while (count < imposters.length) { imposters[count++].classList.remove("voted"); } this.classList.add("voted"); } });

Su setInterval se ejecuta cada segundo. Eso no significa que el resto del código también se ejecute cada segundo. Es por eso que el segundo sigue siendo 20 cuando el código llega a if (second > 0) .

Por lo tanto, debe asegurarse de que esta parte de su código también se ejecute cada segundo. Una solución sería envolver ese código dentro de una función a la que llamas dentro del intervalo, así:

 votingEnd = document.querySelector(".imposters__voting"); imposters = document.querySelectorAll(".imposter"); let second = 20; window.addEventListener("load", function () { let myinterval; myinterval = setInterval(function () { second--; if (second < 11) { votingEnd.style.color = "red"; } votingEnd.innerHTML = `Voting ends in: ${second}s`; if (second == 0) { clearInterval(myinterval); votingEnd.innerHTML = `Voting has ended`; } check(); }, 1000); }); function check() { if (second > 0) { //second is still 20 here because i lowered it in my function above. How can i solve this for (let i = 0; i < imposters.length; i++) { imposters[i].addEventListener("click", function () { let count = 0; while (count < imposters.length) { imposters[count++].classList.remove("voted"); } this.classList.add("voted"); }); } } }