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> 

Answer 2

您搞砸了替换文本。

尝试使用innerHTML，因为标记中包含文本。 因此在init（）内部，它是这样的：

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

Answer 3

是的，正如迈克尔·科克（Michael Coker）回答的那样，问题在于用“注销”文本替换了整个html元素。 我只是想补充一点，如果您想练习登录/验证，请不要尝试执行示例代码更改。 我的意思是验证逻辑。