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处理程序，仅用于此演示，以便您在提交后可以看到按钮的状态。您可能希望在实际代码中删除它。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你搞砸了替换文字。

尝试使用innerHTML，因为您在标记内部有文本。所以在init（）里面它是这样的：

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

Answer 3

是的，正如Michael Coker回答的那样，问题是用“退出”文本替换整个html元素。我只想补充说，示例代码必须只是为了测试dinamicaly dom更改，如果你想练习登录/验证DONT曾经这样做。我的意思是，验证逻辑。

HTML Javascript动态更改为按钮

3 个答案: