对按钮的HTML Javascript动态更改

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

var-validUser；
函数init（）{
var loginCookie=loginWithCookie（）；
如果（loginCookie==true）{
validUser=true；
document.getElementById（“btnSignIn”）.outerHTML=“注销”；
document.getElementById（“btnSignIn”）.style.backgroundColor=“粉色”；
document.getElementById（“结果”）.innnerHTML=“欢迎”+用户+！”；
document.getElementById（“txtUserName”）.style.visibility=“hidden”；
document.getElementById（“txtPassword”）.style.visibility=“hidden”；
}
否则{
validUser=假；
}
}   
函数签名（）{
if（document.getElementById（“btnSignIn”）.innerHTML==“注销”）{
validUser=假；
document.getElementById（“btnSignIn”）.innerHTML=“登录”；
document.getElementById（“btnSignIn”）.style.backgroundColor=“橙色”；
document.getElementById（“结果”）.innerHTML=“欢迎陌生人”；
document.getElementById（“txtUserName”）.style.visibility=“visible”；
document.getElementById（“txtPassword”）.style.visibility=“可见”；
setCookie（“txtsername”，null，“txtPassword”，null，365）
}
否则{
var user=document.getElementById（“txtUserName”）.value；
var pwd=document.getElementById（“txtPassword”）.value；
如果（user.text==“”&&user==null&&
pwd.text===”&&pwd===null）{
validUser=假；
}
否则如果（用户==”john@me.com“&&pwd==”雪“{
validUser=true；
document.getElementById（“btnSignIn”）.style.backgroundColor=“粉色”；
document.getElementById（“btnSignIn”）.outerHTML=“注销”；
document.getElementById（“结果”）.innerHTML=“欢迎”+用户+”；
document.getElementById（“txtUserName”）.style.visibility=“hidden”；
document.getElementById（“txtPassword”）.style.visibility=“hidden”；
var myCookie=setCookie（“txtexername”，用户，“txtPassword”，pwd，365）；
如果（！myCookie）{
validUser=假；
}
}                                        
返回false；
}                                                  
}                                        
函数setCookie（uname、uvalue、pname、pvalue、exdays）{
var cookieEnabled=（navigator.cookieEnabled）？true:false；
如果（cookieEnabled==真）{
var d=新日期（）；
d、 设置时间（d.getTime（）+（exdays*24*60*60*1000））；
var expires=“expires=“+d.toutString（）；
document.cookie=uname+“=”+uvalue+”；“+expires；
document.cookie=pname+“=”+pvalue+”；“+expires；
返回true；
}
否则{
返回false；
}
}
函数loginWithCookie（）{
var cookieEnabled=（navigator.cookieEnabled）？true:false；
如果（cookieEnabled==真）{
var user=getCookie（“用户名”）；
如果（用户！==“”）{
返回用户；
}否则{
返回false；
}
}
否则{
返回false；
}
}
函数getCookie（cname）{
变量名称=cname+“=”；
var ca=document.cookie.split（“；”）；
对于（变量i=0；i

登录

您正在使用

outerHTML

设置

#btnSignIn

的文本，它仅用文本替换节点，因为您提供的只是文本。这将删除应用背景的

#btnSignIn

元素。改用

innerHTML

在此演示中，您还缺少

#结果

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


var-validUser；
函数init（）{
var loginCookie=loginWithCookie（）；
如果（loginCookie===true）{
validUser=true；
document.getElementById（“btnSignIn”）.innerHTML=“注销”；
document.getElementById（“btnSignIn”）.style.backgroundColor=“粉色”；
document.getElementById（“结果”）.innnerHTML=“欢迎”+用户+！”；
document.getElementById（“txtUserName”）.style.visibility=“hidden”；
document.getElementById（“txtPassword”）.style.visibility=“hidden”；
}否则{
validUser=假；
}
}
函数签名（）{
if（document.getElementById（“btnSignIn”）.innerHTML==“注销”）{
validUser=假；
document.getElementById（“btnSignIn”）.innerHTML=“登录”；
document.getElementById（“btnSignIn”）.style.backgroundColor=“橙色”；
document.getElementById（“结果”）.innerHTML=“欢迎陌生人”；
document.getElementById（“txtUserName”）.style.visibility=“visible”；
document.getElementById（“txtPassword”）.style.visibility=“可见”；