javascript - HTML Javascript 动态更改按钮

Question

大家早上好，我整晚都在做这个，我需要一些帮助。当我登录到我的站点时，我正在尝试使用 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 === "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>

目标是，当我登录时，它会说“退出”而不是“登录”，并且背景会变成粉红色。现在，它可以正常登录，但只用白色字母表示“退出”，没有按钮功能，也没有背景颜色变化。

Answer 1

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

在此演示中您还缺少 #results。

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

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>