0

我创建了一个简单的页面，它使用 JavaScript 文件和 onClick 方法来显示不同的 div 标签。我有一个更复杂的程序，它可以让用户使用 ajax，它在浏览器中运行良好，但在弹出窗口中却不行

我读的越多，我在开发者网站上看到的所有内容，我就越感到困惑。Chrome 扩展不允许内联 JavaScript，这很好，但我仍然不确定如何实际编写 JavaScript。我知道这与事件处理程序有关，但即使这只是我的猜测。

任何人都可以使用这个程序并向我展示我需要更改哪些内容才能使用“manifest_version”在弹出窗口中工作：2 并且没有黑客。Google 希望人们如何使用 JavaScript？确实需要一个 hello world 程序来展示如何做到这一点。

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

您不能onclick直接在 HTML 文件中使用属性。删除它们并将您的 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 回答