HTML Javascript dynamic changes to a button

Question

Good morning everyone, I have been working on this all night and I need some assistance. I am trying to use JavaScript to dynamically change a log in button's color when I log in to my site. It seems that my code not only breaks the button when logged in, but has no effect on the background color of the button at all. Here is the code including the button: As you can see, the "btnSignIn" calls the signin() method when clicked. Here is the javascript file I have:

 var validUser; function init() { var loginCookie = loginWithCookie(); if(loginCookie === true) { validUser = true; document.getElementById("btnSignIn").outerHTML = "Sign out"; document.getElementById("btnSignIn").style.backgroundColor = "pink"; document.getElementById("results").innnerHTML = "Welcome " + user +"!"; document.getElementById("txtUserName").style.visibility = "hidden"; document.getElementById("txtPassword").style.visibility = "hidden"; } else { validUser = false; } } function signin() { if (document.getElementById("btnSignIn").innerHTML == "Sign out") { validUser = false; document.getElementById("btnSignIn").innerHTML = "Sign in"; document.getElementById("btnSignIn").style.backgroundColor = "orange"; document.getElementById("results").innerHTML = "Welcome stranger"; document.getElementById("txtUserName").style.visibility = "visible"; document.getElementById("txtPassword").style.visibility = "visible"; setCookie("txtUserName", null, "txtPassword", null, 365); } else { var user = document.getElementById("txtUserName").value; var pwd = document.getElementById("txtPassword").value; if (user.text === "" && user === null && pwd.text === "" && pwd === null) { validUser = false; } else if (user === "john@me.com" && pwd === "snow") { validUser = true; document.getElementById("btnSignIn").style.backgroundColor = "pink"; document.getElementById("btnSignIn").outerHTML = "Sign out"; document.getElementById("results").innerHTML = "Welcome "+ user + "!"; document.getElementById("txtUserName").style.visibility = "hidden"; document.getElementById("txtPassword").style.visibility = "hidden"; var myCookie = setCookie("txtUserName", user, "txtPassword", pwd, 365); if (!myCookie) { validUser = false; } } return false; } } function setCookie(uname, uvalue, pname, pvalue, exdays) { var cookieEnabled = (navigator.cookieEnabled) ? true : false; if (cookieEnabled === true) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires=" + d.toUTCString(); document.cookie = uname + "=" + uvalue + "; " + expires; document.cookie = pname + "=" + pvalue + "; " + expires; return true; } else { return false; } } function loginWithCookie() { var cookieEnabled = (navigator.cookieEnabled) ? true : false; if (cookieEnabled === true) { var user = getCookie("username"); if (user !== "") { return user; }else { return false; } } else { return false; } } function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) === 0) { return c.substring(name.length, c.length); } } return ""; } 

 <ul class="nav navbar-nav navbar-right"> <li> <form id="loginform" class="navbar-form navbar-right"> <div class="form-group"> <input type="text" id="txtUserName" placeholder="Email" class="form-control"> </div> <div class="form-group"> <input type="password" id="txtPassword" placeholder="Password" class="form-control"> </div> <button type="submit" id="btnSignIn" class="btn btn-warning" onclick="signin();" >Sign in</button>&nbsp; </form> </li> </ul> 

The goal is, when I log in, it will say 'sign out' instead of 'sign in' and it will turn pink in the background. Right now, it signs in okay but it only says 'sign out' in white letters, with no button capability and no background color change.

Answer 1

You're using outerHTML to set the text of #btnSignIn which replaces the node with just text, since all you provided was text. That removes the #btnSignIn element that you applied the background to. Use innerHTML instead.

You're also missing #results in this demo.

Note, I added return false to an inline onsubmit handler for the form, just for this demo so you can see the state of the button after submitting. You'll probably want to remove that in your actual code.

 var validUser; function init() { var loginCookie = loginWithCookie(); if (loginCookie === true) { validUser = true; document.getElementById("btnSignIn").innerHTML = "Sign out"; document.getElementById("btnSignIn").style.backgroundColor = "pink"; document.getElementById("results").innnerHTML = "Welcome " + user + "!"; document.getElementById("txtUserName").style.visibility = "hidden"; document.getElementById("txtPassword").style.visibility = "hidden"; } else { validUser = false; } } function signin() { if (document.getElementById("btnSignIn").innerHTML == "Sign out") { validUser = false; document.getElementById("btnSignIn").innerHTML = "Sign in"; document.getElementById("btnSignIn").style.backgroundColor = "orange"; document.getElementById("results").innerHTML = "Welcome stranger"; document.getElementById("txtUserName").style.visibility = "visible"; document.getElementById("txtPassword").style.visibility = "visible"; setCookie("txtUserName", null, "txtPassword", null, 365); } else { var user = document.getElementById("txtUserName").value; var pwd = document.getElementById("txtPassword").value; if (user.text === "" && user === null && pwd.text === "" && pwd === null) { validUser = false; } else if (user === "john@me.com" && pwd === "snow") { validUser = true; document.getElementById("btnSignIn").style.backgroundColor = "pink"; document.getElementById("btnSignIn").innerHTML = "Sign out"; document.getElementById("results").innerHTML = "Welcome " + user + "!"; document.getElementById("txtUserName").style.visibility = "hidden"; document.getElementById("txtPassword").style.visibility = "hidden"; var myCookie = setCookie("txtUserName", user, "txtPassword", pwd, 365); if (!myCookie) { validUser = false; } } return false; } } function setCookie(uname, uvalue, pname, pvalue, exdays) { var cookieEnabled = (navigator.cookieEnabled) ? true : false; if (cookieEnabled === true) { var d = new Date(); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); var expires = "expires=" + d.toUTCString(); document.cookie = uname + "=" + uvalue + "; " + expires; document.cookie = pname + "=" + pvalue + "; " + expires; return true; } else { return false; } } function loginWithCookie() { var cookieEnabled = (navigator.cookieEnabled) ? true : false; if (cookieEnabled === true) { var user = getCookie("username"); if (user !== "") { return user; } else { return false; } } else { return false; } } function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) === 0) { return c.substring(name.length, c.length); } } return ""; } 

 <ul class="nav navbar-nav navbar-right"> <li> <form id="loginform" class="navbar-form navbar-right" onsubmit="return false;"> <div class="form-group"> <input type="text" id="txtUserName" placeholder="Email" class="form-control"> </div> <div class="form-group"> <input type="password" id="txtPassword" placeholder="Password" class="form-control"> </div> <button type="submit" id="btnSignIn" class="btn btn-warning" onclick="signin();">Sign in</button>&nbsp; </form> <div id="results"></div> </li> </ul> 

Answer 2

You messed up with replacing the text.

Try to use innerHTML, cause you have text inside the tag. So inside init() it goes like this:

document.getElementById("btnSignIn").outerHTML = "Sign out"; document.getElementById("btnSignIn").style.backgroundColor = "pink";

Answer 3

Yes, as Michael Coker answer, the problem was replacing the whole html element wit the "sign out" text. I just wanted to add that that example code must be just for testing dinamicaly dom changes, if you wanna practice login/validation DONT ever do that. I mean, the validation logic.