Js style password working or password not working

Question

I have this js styling but it seems to not work. I don't know what is wrong

 <div id="SignUp-Password">
 <div id="SignUp-LG-Password">Password:</div>
 <input
 size="42"
 type="Password"
 maxlength="42"
 name="SignUp-Input-Password"
 id="SignUp-Input-Password">
 <input id="SignUp-CheckBox-Password"
 type="checkbox"
 name="SignUp-CheckBox-Password">
 <div id="SignUp-Password-Show">Show</div>
 <span id="SignUp-Password-Match/Notmatch"/>
 </div>
 <div id="SignUp-Password-Repeat">
 <div id="SignUp-LG-Password-Repeat">Password Repeat:</div>
 <input
 size="42"
 type="text"
 maxlength="42"
 name="SignUp-Input-Password-Repeat"
 id="SignUp-Input-Password-Repeat">
 <div id="SignUp-Password-Strong"></div>
 <div class="registrationFormAlert" id="divCheckPasswordMatch"></div>
 </div>

java

 function checkPasswordMatch() {
 var password = $("#SignUp-Input-Password").val();
 var confirmPassword = $("#SignUp-Input-Password-Repeat").val();
 if (password != confirmPassword)
 $("#divCheckPasswordMatch").html("Passwords do not match!").style.color = "red";
 else
 $("#divCheckPasswordMatch").html("Passwords match.").style.color = "green";
 }
 $(document).ready(function () {
 $("#SignUp-Input-Password-Repeat").keyup(checkPasswordMatch);
 });

I would think this is easy for you but I need some help with javascript. you can also see this http://jsfiddle.net/fLqujmp3/

Answer 1

Your syntaxt to set style incorrect, change to

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

If you want to use javascript, change it to

document.getElementById("divCheckPasswordMatch").style.color = "red";

function checkPasswordMatch() {
 var password = $("#SignUp-Input-Password").val();
 var confirmPassword = $("#SignUp-Input-Password-Repeat").val();
 if (password != confirmPassword){
 $("#divCheckPasswordMatch").html("Passwords do not match!");
 document.getElementById("divCheckPasswordMatch").style.color = "red";
 //$("#divCheckPasswordMatch").css("color","red");
 }
 else{
 $("#divCheckPasswordMatch").html("Passwords match.")
 $("#divCheckPasswordMatch").css("color","green");
 }
 }
 $(document).ready(function () {
 $("#SignUp-Input-Password-Repeat").keyup(checkPasswordMatch);
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="SignUp-Password">
 <div id="SignUp-LG-Password">Password:</div>
 <input
 size="42"
 type="Password"
 maxlength="42"
 name="SignUp-Input-Password"
 id="SignUp-Input-Password">
 <input id="SignUp-CheckBox-Password"
 type="checkbox"
 name="SignUp-CheckBox-Password">
 <div id="SignUp-Password-Show">Show</div>
 <span id="SignUp-Password-Match/Notmatch"/>
 </div>
 <div id="SignUp-Password-Repeat">
 <div id="SignUp-LG-Password-Repeat">Password Repeat:</div>
 <input
 size="42"
 type="text"
 maxlength="42"
 name="SignUp-Input-Password-Repeat"
 id="SignUp-Input-Password-Repeat">
 <div id="SignUp-Password-Strong"></div>
 <div class="registrationFormAlert" id="divCheckPasswordMatch"></div>
 </div>