javascript - How do I change the color of a button depending on an if statement? -

i working on website requires user registration. on register form, have 4 text fields, , "register" button. have username field, email field, password field, , confirm password field. there several tests executed whenever user inputs information. example, there username availability checker, email validator, password match checker, , password strength checker. in order user able register, want of these tests passed. if @ least 1 of these tests fail, example user's passwords don't match, don't want register button clickable(and i'd register button gray'd out while it's unclickable.) here's attempt:

first, set 4 variables. each variable represents test undergone.

var test1 = 0; var test2 = 0; var test3 = 0; var test4 = 0; 

by default, tests set '0' represent failed test. default, register button should unclickable , gray'd out.

then, edited tests themselves. if test passed, set corresponding test variable '1'. example, here's username test:

if(msg == 'ok') //if username available {       $("#username").removeclass("red");     $("#username").addclass("green");     msgbox.html('<img src="available.png" align="absmiddle">');     test1 = 1; //sets first test variable passed }   else  //if username not available {        $("#username").removeclass("green");      $("#username").addclass("red");     msgbox.html(msg);     test1 = 0; //sets first test variable failed } 

there lot more code used make username availability checker work, don't feel rest of code necessary question have.

i repeat same idea throughout other 3 tests. email validator, password strength checker, , password match checker. if 4 tests passed(if 4 text fields filled out correctly) test variables set '1'.

next, set function checks value of test variables see whether or not passed.

function checkbutton(){  if (test1 == 1 && test2 == 1 && test3 == 1 && test4 == 1){ //checks if 4 tests passed $("#register").prop('disabled', false); //if are, make register button clickable } else { $("#register").prop('disabled', true); //if not, make register button not clickable $("#register").style.backgroundcolor = "#a09b9b"; //as change button background color gray. } } 

after that, call function every time key pressed in of fields. using 'onkeyup' attribute.

<input type="text" name="username" onkeypress="return inputlimiter(event,'username'); checkbutton()" id="username" maxlength="20" placeholder="enter desired username"/><br> <input type="text" name="email" id="email" onkeyup="checkbutton()" placeholder="enter e-mail address here"/><br> <input type="password" class="password" id="password" name="password" onkeyup="checkstrength(); checkpasswordmatch(); checkbutton()" placeholder="enter password more 5 characters"/><br> <input type="password" id="password2" onkeyup="checkpasswordmatch(); checkbutton()" name="password2" placeholder="enter same password entered above"/><br> 

if seeing register form in action help, visit here: register form

if problem "how disable submit button?", code you.

this code disable submit button:

document.getelementbyid("register").setattribute("disabled", "true"); 

and enable it:

document.getelementbyid("register").removeattribute("disabled"); 

using setattribute("disabled", "false") not enable submit button (more information here: .setattribute("disabled", false); changes editable attribute false)

hope helps