CODEWITHSUNDEEP
javascriptphpcodeigniter
Sesese
Sesese

Reputation: 33

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?

Upvotes: 1

Views: 116

Answers (6)

anggito wibisono
anggito wibisono

Reputation: 89

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

Upvotes: 0

Sinto
Sinto

Reputation: 3997

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>

Upvotes: 1

vasilenicusor
vasilenicusor

Reputation: 2073

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

Upvotes: 0

anggito wibisono
anggito wibisono

Reputation: 89

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

to

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

Upvotes: 1

Voi Mập
Voi Mập

Reputation: 819

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

In your 1.if ^^

Upvotes: 0

Kamil Krzysztof Dworak
Kamil Krzysztof Dworak

Reputation: 21

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

Upvotes: 0

Related Questions