How to change the color of text dynamically?

The <div>'s in your html need to be closed. Your browser does not know how to structure broken html, so it will likely render your html as nested <div>'s like this:

<div id="divCheckPasswordMatch2" style="color:red"> <div id="divCheckPasswordMatch" style="color:green"> </div> </div> 

This means that when you replace the html with the javascript line:

$("#divCheckPasswordMatch2").html("Passwords Don't Match."); 

That the browser removes the other <div> to put in the string "Passwords Don't Match". The result is:

<div id="divCheckPasswordMatch2" style="color:red"> <!-- This other div is removed --> Passwords don't match </div> 

Now, any attempt to replace the text on #divCheckPasswordMatch will fail, because that element does not exist any more.

Here is how to fix that problem: add closing tags

<div id="divCheckPasswordMatch2" style="color:red"></div> <div id="divCheckPasswordMatch" style="color:green"></div> 

By adding closing tags, you are telling the browser where to end your block, and you are telling the browser that the blocks are next to each-other and not containing each other. With this change, you will now be able to add and remove text freely to both div's and it will never affect the other div.

Now, let us take this fix a little farther.

@dman2306 correctly pointed out that your code will show both the error message and the success message as written. Let's fix that by using just one div and changing the class.

Use the following:

//HTML5 does not require type tags on your script blocks function checkPasswordMatch() { var password = $("#txtNewPassword").val(); var confirmPassword = $("#txtConfirmPassword").val(); var div = $( "#messageBlock" ); if (password == confirmPassword){ $(div).removeClass( "bad_password" ); if( password == "" && confirmPassword == "" ){ /* We do not delete the div. We set the html content to an empty string. This way we can use the DIV again in the future */ $(div).html(""); }else{ $(div).html("Password Matched"); } } else { $(div).html("Passwords Don't Match."); $(div).addClass("bad_password"); } } $(document).ready(function () { $("#txtConfirmPassword").keyup(checkPasswordMatch); });

#messageBlock { color: green; } #messageBlock.bad_password { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>Example</h1> <p>Please enter passwords to check the behavior of the message div</p> <input type="password" class="form-control" placeholder="Password" required="required" name="txtNewPassword" id="txtNewPassword"> <br /> <input type="password" class="form-control" placeholder="Confirm Password" required="required" name="txtConfirmPassword" id="txtConfirmPassword" onChange="checkPasswordMatch();"> <div id="messageBlock"><!-- this is where ALL messages appear, and the color is based on the class name --></div>

Run the code above to see a live example of the new code.

This code has the following benefits:

1. By using a single message div, you show only one message at a time. All new messages replace the preceding message.
2. The color is not hard-coded into the element, so you can change the look of your page just by changing your css, which now sits in a <style> element.
3. Your javascript becomes a little more simple, you only need to worry about adding the right message and then adding or removing a single class name. The default text color is green, and with the class name bad_password, the text color changes to red.

You can still make several improvements on this design, but I have made recommendations based on your submission so that you can grow and improve as a coder. Keep up the good work and soon you will be building amazing things!