HTML Javascript对按钮的动态更改

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:

大家早上好，我整晚都在做这个，我需要一些帮助。当我登录到我的站点时，我尝试使用JavaScript动态地改变一个日志按钮的颜色。似乎我的代码不仅在登录时中断了按钮，而且对按钮的背景颜色也没有任何影响。这是包含按钮的代码:如您所见，“btnSignIn”在单击时调用signin()方法。下面是我的javascript文件:

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 === "[e-mail]" && 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.

我的目标是，当我登录时，它会显示'sign out'而不是'sign in'它会在后台变成粉红色。现在，它的标志是ok，但它只是用白色字母写“sign out”，没有按钮功能，也没有背景颜色的改变。

3 个解决方案

#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.

您正在使用outerHTML来设置#btnSignIn的文本，该文本用文本替换节点，因为您提供的只是文本。这将删除您将背景应用到的#btnSignIn元素。使用innerHTML代替。

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.

注意，我为表单的内联onsubmit处理程序添加了return false，以便您可以在提交后看到按钮的状态。您可能希望在实际代码中删除它。

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 === "[e-mail]" && 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>

#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:

尝试使用innerHTML，因为标签内有文本。init()里面是这样的

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

. getelementbyid(“btnSignIn”)。outerHTML =“签出”;.style . getelementbyid(“btnSignIn”)。写成backgroundColor =“粉红色”;

#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.

是的，正如Michael Coker的回答，问题是用“签名”文本替换整个html元素。我只是想补充一下，这个示例代码必须只是用于测试dinamicaly dom更改，如果您想要实践登录/验证，那么千万不要这样做。我的意思是，验证逻辑。