how to change the text color in javascript

Question

i want to change the color of html text if the password is error then it should be shown in red color and if is correct then it should be shown in green color here is the code i am not using jquery i have searched it through the stack flow i found n i tried to implement it but it doesn't worked so i posted this question

<div class="td">
    <input type="password" id="txtNewPassword" />
</div>
<div class="td">
    <input type="password" id="txtConfirmPassword" onChange="checkPasswordMatch();" />
</div>
    <div class="registrationFormAlert" id="divCheckPasswordMatch">
</div>

and the javascript

    function checkPasswordMatch() {
    var password = $("#txtNewPassword").val();
    var confirmPassword = $("#txtConfirmPassword").val();

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

$(document).ready(function () {
   $("#txtNewPassword, #txtConfirmPassword").keyup(checkPasswordMatch);
});

i want to change the color of Passwords do not match! to red and passwords match to green

He is asking for the text color change. You can use `css` method of jQuery as in this http://stackoverflow.com/a/43450050/2737783 — Manvendra SK, Apr 17 '17 at 10:54
The question has been closed, so this is a comment. I am going to dissent and suggest that you shouldn’t do that in JavaScript. The problem is that when you change your mind about the actual colour or other style, you have to fix that in JavaScript. You really should do that in CSS. The trick is in two steps. First define a suitable class in CSS: `.error { color: red; }` Next, change the _class_ in JavaScript: `if (password != confirmPassword) $("#divCheckPasswordMatch").addClass('error'); else $("#divCheckPasswordMatch").removeClass('error');` — Manngo, Apr 17 '17 at 11:08
By the way, this is definitely not efficient coding. Every time you do a test, you run `$("#divCheckPasswordMatch")` again which amounts to a _lot_ of internal code in jQuery. You really should do it once and assign it to a variable. — Manngo, Apr 17 '17 at 11:08

score 1 · Answer 1 · answered Apr 17 '17 at 10:43

You can use the following code to change text color from javascript

document.getElementById("divCheckPasswordMatch").style.color = "#ff0000";
document.getElementById("divCheckPasswordMatch").style.color = "magenta";
document.getElementById("divCheckPasswordMatch").style.color = "blue";
document.getElementById("divCheckPasswordMatch").style.color = "lightblue";

score 1 · Accepted Answer · answered Apr 17 '17 at 10:45

You can use css to change the color or

Try this code

    function checkPasswordMatch() {
      var password = $("#txtNewPassword").val();
      var confirmPassword = $("#txtConfirmPassword").val();
       if (password != confirmPassword)
       {
        var match="Passwords do not match!";
        var result=match.fontcolor('red');
        $("#divCheckPasswordMatch").html(result);
       }
      else
      {
        var match="Passwords match.";
        var result=match.fontcolor('green');
        $("#divCheckPasswordMatch").html(result);
     }
  }
    $(document).ready(function() {
      $("#txtNewPassword, #txtConfirmPassword").keyup(checkPasswordMatch);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="td">
  <input type="password" id="txtNewPassword" />
</div>
<div class="td">
  <input type="password" id="txtConfirmPassword" onChange="checkPasswordMatch();" />
</div>
<div class="registrationFormAlert" id="divCheckPasswordMatch">
</div>

Use Font color attribute to change the color of text

prasanth · Answer 3 · 2017-04-17T10:56:13.250

simply use single line if condition and css() function of jquery

if match green color
else red color

function checkPasswordMatch() {
  var password = $("#txtNewPassword").val();
  var confirmPassword = $("#txtConfirmPassword").val();
  var html = password != confirmPassword ? "Passwords do not match!" : "Passwords match";
   var color = password != confirmPassword ? "red" : "green";
  $("#divCheckPasswordMatch").html(html).css('color',color)
}
$(document).ready(function() {
  $("#txtNewPassword, #txtConfirmPassword").keyup(checkPasswordMatch);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="td">
  <input type="password" id="txtNewPassword" />
</div>
<div class="td">
  <input type="password" id="txtConfirmPassword" onChange="checkPasswordMatch();" />
</div>
<div class="registrationFormAlert" id="divCheckPasswordMatch">
</div>

score 0 · Answer 4 · answered Apr 17 '17 at 10:52

function checkPasswordMatch() {
    // Other code
    var $message = $("#divCheckPasswordMatch");
    if (password !== confirmPassword)  {
            $message.html("Passwords do not match!");
            $message.css("color", "red");
    } else {
            $message.html("Passwords match.");
            $message.css("color", "green"); 
    }
}

how to change the text color in javascript

4 Answers4