How can I manipulate the DOM after some delay? I want the background to change to green and the score update once the player guesses right. Then after some seconds, I want the background to return to the initial state and hidden number which I set to be a randomly generated number to change. Everything worked out well by using setInterval but it turns out that the hidden number continues to regenerate within the given time.

//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
            }      
        
    
    }