0

ログインページにボタンがあり、クリックすると非表示になり、そのボタンの代わりにスパンが表示されます。コードは次のとおりです。

<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>

だから...問題は、「待つ...」をクリックするたびに、同じテキストである新しいテキストを書き続けることです。この問題を止める方法があれば知りたいです。提案をありがとう。

4

1 に答える 1

0

サンプルコードを考えると、次のように、「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);
    }
}
于 2013-07-13T12:15:30.343 に答える