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元素。 我只是想補充一點，如果您想練習登錄/驗證，請不要嘗試執行示例代碼更改。 我的意思是驗證邏輯。