¿Cómo puedo manipular el DOM después de algún retraso? Quiero que el fondo cambie a verde y que la puntuación se actualice una vez que el jugador acierte. Luego, después de algunos segundos, quiero que el fondo vuelva al estado inicial y al número oculto que configuré para que sea un número generado aleatoriamente para cambiar. Todo salió bien usando setInterval pero resulta que el número oculto continúa regenerándose dentro del tiempo dado.

 //This is the function for the timer function correctDefault() { setInterval(() => { document.querySelector('body').style.backgroundColor= '#222' document.querySelector('.number').style.width= '15rem' document.querySelector('.number').textContent = '?' // secretNumber = Math.trunc(Math.random() * 20) + 1; document.querySelector('.number').textContent = secretNumber }, 3000); } //And this is the condition else if (guess === secretNumber) { if (score !== 50) { document.querySelector('body').style.backgroundColor= '#60b347' displayMessage('🎉 Correct Number!') score++ document.querySelector('.number').style.width= '17rem' document.querySelector('.number').textContent = secretNumber document.querySelector('.score').textContent = score; correctDefault() } else{ displayMessage('👏 You Won the Game') document.querySelector('.highscore').textContent = score; document.querySelector('body').style.backgroundColor= 'rgb(180, 245, 0' document.querySelector('.number').textContent = guess } }