How can I change the class with addClass() of an html() method?

How can I change the class with addClass() of an html() method?

I have a guessing game and I am adding text to a <div id="message"></div> above an input field. I want to dynamically add a class using a function to the html text that I have already added to the div#message. How can I achieve this with a function?


var numberGuesses = 3;
var randomNumber = Math.floor(Math.random() * 10) + 1;


var numberGuesses = 3;
var randomNumber = Math.floor(Math.random() * 10) + 1;

function isValid() {
        var number = document.getElementById("guess").value;
        if(number == null || number == "" || isNaN(number)){
            alert( "Number Please!" );
            return false;
        };
       return true;
    };  

var messageUser = function(){
        $("#message").addClass("error"); 
    };

function compareNumbers(){   
    var guess = document.getElementById("guess").value;
    
    if(guess > randomNumber){
        numberGuesses = numberGuesses - 1;
        $("#message").html("Too High!" + "<br>" + "You have " + numberGuesses + " guesses left"); 
           
        if(numberGuesses < 0){
            $("#message").html("You have no more guesses left");
        }
    }
    else if(guess < randomNumber){
        numberGuesses = numberGuesses - 1;
        $("#message").html("Too Low!" + "<br>" + "You have " + numberGuesses + " guesses left");
            if(numberGuesses > 0){
                $(".message").html("You have no more guesses left");  
             }
    }
    else{
        $("#message").html("Your guess is correct!!!");    
      }  
     
     console.log(randomNumber);
};

// add event listener
/*var guessButton = document.getElementById("guessButton");*/
$("#guessButton").on("click", function () {
  if (isValid()) {
    compareNumbers();
  }
  
});