2017-07-09 22 views
2

おはようございます、私は一晩中この作業をしており、何か助けが必要です。私は自分のサイトにログインするときにJavaScriptを使ってボタンの色を動的に変更しようとしています。私のコードは、ログイン時にボタンを壊すだけでなく、ボタンの背景色に全く影響を与えないようです。ここにボタンを含むコードがあります: ご覧のとおり、「btnSignIn」は、クリックするとsignin()メソッドを呼び出します。HTML 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 === "[email protected]" && 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>

目標は、私がログインしたとき、それは「サインアウト」と言うだろう代わりに「サインイン」と、それはでピンクになります、次のとおりです。ここで私が持っているのJavaScriptファイルがありますバックグラウンド。今は大丈夫ですが、ボタン機能と背景色の変更がない白い文字で「サインアウト」としか言いません。

+0

これは単なる学習体験のためのものであり、本番用ではありません。誰でもコード内の資格情報を見ることができます – charlietfl

+0

はい、これは単なる学習のためのものです。 –

答えて

2

outerHTMLを使用して、#btnSignInというテキストを設定しています。このテキストは、テキストのみでノードを置き換えます。これにより、背景を適用した要素#btnSignInが削除されます。代わりにinnerHTMLを使用してください。

このデモでは#resultsもありません。

フォームのインラインonsubmitハンドラにreturn falseを追加しました。このデモだけで、送信後にボタンの状態を確認できます。おそらく実際のコードでそれを削除したいでしょう。

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 === "[email protected]" && 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>

+0

ありがとうございました!私は内側か外側が適切かどうか疑問に思いました。残念ながら、outerHTMLステートメントをinnerに置き換えると、新しい問題が発生します。ピンク色に変わってログアウトしますが、直ちに元の状態に戻り、ログアウトするまでユーザーがログアウトするのを待たずに戻ります。何が原因なのか知っていますか? –

+0

@BryanS。どういたしまして。 'outerHTML'の両方のインスタンスを' innerHTML'に置き換えましたか?もしそうなら、私はそれがあなたのクッキーロジックと関係があると推測しています。 –

+1

私は実際にそれを理解しました。あなたが含まれているインラインonsubmitを介してfalseを返すと、直前の状態に戻すことはできません。 –

2

あなたはテキストを置き換えて台無し。

innerHTMLを使用すると、タグ内にテキストが表示されます。 だからのinit()内には、このように書きます:

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

+0

あなたはdocument.getElementByID( "btnSignIn")を意味しますか?innerHTML = "サインアウト"; –

+0

はい - それは適切なプロパティです – pkolawa

2

はい、マイケル・コーカーの答えとして、問題は全体のhtml要素のウィット「サインアウト」のテキストを置き換えました。 私は、ログイン/検証の練習をしたいと思っていれば、この例のコードはdinamicaly domの変更をテストするためだけでなければならないということを追加したかっただけです。つまり、検証ロジックです。

+0

私は強く同意します – pkolawa

関連する問題