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 === "[email protected]" && 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.

Hope this is just for learning experience and not for production. Anyone can see the credentials in your code — charlietfl
– charlietfl, Commented Jul 9, 2017 at 13:47

Michael Coker · Accepted Answer · 2017-07-09 13:47:34Z

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 === "[email protected]" && 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>

Thank you for the response! I was wondering whether or not inner or outer was appropriate. Unfortunately, replacing the outerHTML statements with inner creates a new problem: It turns pink and says sign out, but it reverts to how it was immediately, and does not wait for the user to click sign out in order to go back. Do you know what might be the cause?
@BryanS. you're welcome. Did you replace both instances of outerHTML with innerHTML? If so, I'm guessing it has something to do with your cookie logic.
I actually just figured it out. The return false via the inline onsubmit that you included prevented the immediate revert back to the previous state.
@BryanS. awesome, yeah just added that for this demo to maintain the state of that button on submit.

pkolawa · Accepted Answer · 2017-07-09 13:54:27Z

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";

answered Jul 9, 2017 at 13:54

pkolawa

6836 silver badges17 bronze badges

1 Comment

Bryan S. Over a year ago

Do you mean document.getElementByID("btnSignIn").innerHTML = "Sign out";?

Jona Santana · Accepted Answer · 2017-07-09 14:01:19Z

2

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.

answered Jul 9, 2017 at 14:01

Jona Santana

1302 gold badges2 silver badges11 bronze badges

1 Comment

pkolawa Over a year ago

I strongly agree

Collectives™ on Stack Overflow

HTML Javascript dynamic changes to a button

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related