'Changing font color in javascript

Here's my javascript code: 

if (password != confirmPassword)
        $("#divCheckPasswordMatch").html("Passwords do not match!");
    else
        $("#divCheckPasswordMatch").html("Passwords match.");
}

I just want to change the color of the message "password do not match" into red. I'm a beginner, can someone help me?

javascriptphpcodeigniter


Solution 1:[1]

try using this:

password = '123x';
confirmPassword = '123';
if (password != confirmPassword) {
  $("#divCheckPasswordMatch").html("Passwords do not match!").css('color', '#900');

} else {
  $("#divCheckPasswordMatch").html("Passwords match.").css('color', '#090');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divCheckPasswordMatch"></div>

Solution 2:[2]

$("#divCheckPasswordMatch").html("Passwords do not match!");

to

$("#divCheckPasswordMatch").html("<span style='color:red'>Passwords do not match!</span>");

Solution 3:[3]

if (password != confirmPassword){
        $("#divCheckPasswordMatch").html("<span style='color:red'>Passwords do not match!</span>");
 }   else {
        $("#divCheckPasswordMatch").html("Passwords match.");
}

Solution 4:[4]

$("#divCheckPasswordMatch").css('color', 'red');

In your 1.if ^^

Solution 5:[5]

You can the css() method:

if (password != confirmPassword)
{
    $("#divCheckPasswordMatch").html("Passwords do not match!");
    $("#divCheckPasswordMatch").css('color', 'red');
} else {
    $("#divCheckPasswordMatch").html("Passwords match.");
    $("#divCheckPasswordMatch").css('color', 'green');
}

More details you can find on jquery .css documentation page

Solution 6:[6]

Different approach if you don't want to use jquery.

thePasswordTextEle = document.createElement("span")

if (password != confirmPassword)
{
    thePasswordTextEle.classList.add("red-text")
    thePasswordTextEle.innerHTML = "Password ***"
} else {
    thePasswordTextEle.classList.add("green-text")
    thePasswordTextEle.innerHTML = "Password ***"
}
document.querySelector('#divCheckPasswordMatch').innerHTML = thePasswordTextEle.outerHTML

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 anggito wibisono
Solution 3 Kamil Krzysztof Dworak
Solution 4 Voi M?p
Solution 5 vasilenicusor
Solution 6 anggito wibisono

Related Questions