反正有一次使用appendchild？

Question

我在我的登錄頁面上有一個按鈕，當你點擊時，它變得不可見，而不是那個按鈕你會看到一個跨度。代碼：

<script type="text/javascript"> 
    function enterSystem() { 
     document.getElementById("btnLogin").style.display = "none"; 
     var newtext = document.createTextNode("Wait..."); 
     document.getElementById("brain13").appendChild(newtext); 
    } 
</script> 

ASP方：

<span class="lblMessageLoading" id="brain13" onclick="enterSystem();"> 
<asp:button class="LoginButton" id="btnLogin" name="btnLogin" runat="server" onclick="btnLogin-Click" /> </span> 

所以......問題是，我每次點擊一次「等待...」保持它寫使用newText這是相同的文字。 我想知道是否有辦法阻止這個問題。 感謝您的任何建議。

Answer 1

鑑於你的示例代碼，這將是最簡單的，只是增加一個檢查，看看是否「btnLogin」按鈕已經是看不見的，就像這樣：

function enterSystem() { 
    var loginButton = document.getElementById("btnLogin"); 
    if (loginButton.style.display !== "none"){ 
     loginButton.style.display = "none"; 
     var newtext = document.createTextNode("Wait..."); 
     document.getElementById("brain13").appendChild(newtext); 
    } 
} 

就個人而言，我更喜歡用指示CSS類工作文檔狀態，因爲這樣可以方便地進行測試和調試，並且可以將樣式保留在樣式表中（並且它可以使用單一狀態同時影響多個元素）。

我要補充這個頁面樣式表：

body.loginActive #btnLogin 
{ 
    display: none; 
} 

於是重寫enterSystem功能：

function enterSystem() 
{ 
    // this uses classList which is rather new (http://caniuse.com/classlist) 
    // you may want to rewrite this into a test using a regular expression 
    // e.g. if (/\bloginActive\b/.test(document.body.className)) 
    if (!document.body.classList.contains('loginActive')) 
    { 
     // the classList again, you may want to write this as: 
     // document.body.className += ' loginActive'; 
     document.body.classList.add('loginActive'); 
     var newtext = document.createTextNode("Wait..."); 
     document.getElementById("brain13").appendChild(newtext); 
    } 
}