尝试在 Chrome 扩展程序选项页面中显示提醒，但出现"Cannot set property 'innerHTML' of undefined"

我试图在我的chrome扩展选项页面上显示一个小状态框。我试图遵循这里的文档中的例子。

但是我得到一个例外Uncaught TypeError: Cannot set property 'innerHTML' of undefined。这个例子从来没有定义一个状态对象，但我是一个javascript/html的新手，我不知道是否有一些明显的东西我错过了。这是我的选项页面的代码。

回调函数第二行出错

<script type="text/javascript" >
    function login(event){
                event.preventDefault();
        var username = document.getElementById("username");
        var password = document.getElementById("password");
        if(username.value != null && password.value != null) chrome.extension.getBackgroundPage().login(username, password, callback);
    }
    function callback(){
            status = document.getElementById("status");
        status.innerHTML = "Now logged in";
        setTimeout(function(){
                status.innerHTML = "";
        }, 750);
    }
</script>
<body>
<form>
Username: <input type="text" name="username" id="username" /> <br />
Password: <input type="password" name="password" id="password" /> <br />
<button onclick="login(event)">Login</button>
</form>
<div id="status"></div>
</body>

由于您正在提交form，当您单击登录时，页面正在重新加载。为了避免这种情况，您可以调用event. preventdefault()并将事件传递给login函数，如下所示:

    <script type="text/javascript" >
    function login(event){
        event.preventDefault();
        var username = document.getElementById("username");
        var password = document.getElementById("password");
        if(username.value != null && password.value != null) chrome.extension.getBackgroundPage().login(username, password, callback);
    }
    function callback(){
        var status = document.getElementById("status");
        status.innerHTML = "Now logged in";
        setTimeout(function(){
                status.innerHTML = "";
        }, 750);
    }
    </script>
    <body>
    <form>
    Username: <input type="text" name="username" id="username" /> <br />
    Password: <input type="password" name="password" id="password" /> <br />
    <button onclick="login(event)">Login</button>
    </form>
    <div id="status"></div>
    </body>

这将阻止form提交和工作，如您所期望的。

您没有id为status的HTML元素，这会导致错误，因为document.getElementById()在找不到元素时返回null或undefined。
要修复它，只需添加一个id为status的元素。交货。

<button onclick="login()">Login</button>
</form>
<div id="status"></div>
</body>

我可能是不正确的，但我没有任何经验与"chrome.extension"。如果你改变了var status = document.getElementById("status"); status.innerHTML = "Now logged in";

into var status = window.document.getElementById("status"); status.innerHTML = "Now logged in";

注意添加的'window'，也许回调试图搜索'chrome.extension '。文档'而不是'窗口。文档"?

相关内容

最新更新

热门标签：