嘗試在 Chrome 擴展選項頁面中顯示警報，但得到“無法設置未定義的屬性 'innerHTML'”

Question

我試圖在我的 chrome 擴展的選項頁面中顯示一個小狀態框。 我正在嘗試按照此處文檔中的示例進行操作。

但我得到一個異常Uncaught TypeError: Cannot set property 'innerHTML' of undefined 。 該示例從未定義狀態 object 但我是 javascript/html 的菜鳥，我不知道是否有明顯的遺漏。 這是我的選項頁面的代碼。

回調 function 的第 2 行發生錯誤。

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

Answer 1

您沒有 id status的 HTML 元素，這會導致錯誤，因為document.getElementById()在找不到元素時返回null或undefined 。
要修復它，只需添加一個 id 為status的元素。 前任。

<button onclick="login()">Login</button>
</form>

<div id="status"></div>
</body>

Answer 2

由於您正在提交form ，因此當您單擊Login時頁面正在重新加載。 為避免這種情況，您可以調用event.preventDefault()並將事件傳遞給login function，如下所示；

    <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提交並按您的預期工作。

Answer 3

我可能不正確，但我對“chrome.extension”沒有任何經驗。 如果你改變var status = document.getElementById("status"); status.innerHTML = "Now logged in"; var status = document.getElementById("status"); status.innerHTML = "Now logged in";

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

注意添加的“窗口”，也許回調嘗試搜索“chrome.extension.document”而不是“window.document”？

嘗試在 Chrome 擴展選項頁面中顯示警報，但得到“無法設置未定義的屬性 'innerHTML'”

問題描述

3 個解決方案

解決方案1
1 2011-08-12 04:05:19

解決方案2
1 已采納 2011-08-12 14:45:01

解決方案3
0 2011-08-12 07:46:33

嘗試在 Chrome 擴展選項頁面中顯示警報，但得到“無法設置未定義的屬性 'innerHTML'”

問題描述

3 個解決方案

解決方案1 1 2011-08-12 04:05:19

解決方案2 1 已采納 2011-08-12 14:45:01

解決方案3 0 2011-08-12 07:46:33

解決方案1
1 2011-08-12 04:05:19

解決方案2
1 已采納 2011-08-12 14:45:01

解決方案3
0 2011-08-12 07:46:33