how to add css in innerText-CodePudding

I have a function in JavaScript that generates an error message, but I would like to add CSS to it. For example: a yellow background and a red color.

 //ciblage
 let btn = document.getElementsByClassName("buttons"); 
 let D = document.getElementsByClassName("div_text");
 let errorMessage = document.createElement("div"); 
 stringLength = document.getElementById('username');

const regex = /\W/;
 errorMessage.id = 'warning';
 D[0].appendChild(errorMessage); 
  stringLength.addEventListener('input', function (evt) {
    if (stringLength.value.length > 10) {
         document.getElementById('warning').innerText = "le nombre          de caractères maximum autorisés est de 10"
      btn[0].disabled = true;
    } 
    
  });

CodePudding user response：

document.getElementById('warning').style.backgroundColor="yellow";
document.getElementById('warning').style.color="red";

CodePudding user response：

JS under let errormessage

errorMessage.classList.add("error");

CSS:

.error {
    background-color: yellow;
    color: red;
}

Or all in JS

// add css styles to the error message
errorMessage.style.backgroundColor = "yellow";
errorMessage.style.color = "red";

CodePudding user response：

document.getElementById('warning').style.backgroundColor = "yellow";
document.getElementById('warning').style.color = "red";