0

JavaScriptファイルとonClickメソッドを使用してさまざまなdivタグを表示する簡単なページを作成しました。私はajaxを使用してユーザーにサインインするはるかに複雑なプログラムを持っています。それはブラウザーでは正常に動作しますが、ポップアップでは動作しません

読むほど、開発者サイトのすべてを読んだので、混乱が増します。Chrome拡張機能はインラインJavaScriptを許可していませんが、これは問題ありませんが、実際にJavaScriptを作成する方法がわかりません。イベントハンドラーと関係があることは知っていますが、それでも私は推測しています。

誰かがこのプログラムを利用して、「manifest_version」：2を使用し、ハックなしでポップアップで機能させるために変更する必要があるものを教えてもらえますか。Googleは人々がJavaScriptを使用することをどのように期待していますか？これを行う方法を示すHelloWorldプログラムが本当に必要です。

HTML：

<!DOCTYPE HTML>
<html>
 <head>
  <title> Pop Up </title>

  <script src = "test.js"></script>



<style type = "text/css">

    #signout
    {
        display:none;
    }

</style>


</head>
<body>
    <!-- ///////////////////////////////////////////// -->
    <!-- //////////////// Log In Screen ////////////// -->
    <!-- ///////////////////////////////////////////// -->
    <div id = "login">
        <form method="post" action="">

            Username:
            <input type="text" name = "user" id = "user"><br>
            Password:
            <input type="text" name = "pass" id = "pass"><br>
            <input type="button" value="submit" onClick="logInPHP()" />
        </form>
    </div>




    <!-- ///////////////////////////////////////////// -->
    <!-- //////////////// Sign Out Screen //////////// -->
    <!-- ///////////////////////////////////////////// -->
    <div id = "signout">
        Your are Currently signed in.<br />
        <a href = "#" onclick = "signOutPHP()">Sign Out</a>
    </div>


</body>
</html>

Javascript：

function logInPHP(){
            document.getElementById("login").style.display = "none";
            document.getElementById("signout").style.display = "inline";
}
function signOutPHP(){
            document.getElementById("login").style.display = "inline";
            document.getElementById("signout").style.display = "none";
}
4

1 に答える 1

2

onclickHTMLファイルで属性を直接使用することはできません。それらを削除し、JavaScriptコードをドキュメント'DOMContentLoaded'イベントリスナーにラップします。

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("login").addEventListener('click', function(){
        document.getElementById("login").style.display = "none";
        document.getElementById("signout").style.display = "inline";
    });

    document.getElementById("signout").addEventListener('click', function(){
        document.getElementById("login").style.display = "inline";
        document.getElementById("signout").style.display = "none";
    });
});
于 2013-02-14T21:45:10.663 に答える