Question

我正在尝试将JavaScript值传递给Chrome扩展程序的HTML。我不断收到一个错误，指出所引用的元素为空。

popup.html

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="popup.js"></script>
</head>
<body>
    <div>
        <h3>Output</h3>
        <br>
        <output id="outputKey">Output goes here</output>
    </div>
</body>
</html>

popup.js

chrome.storage.sync.get("key", function (value) {
    console.log("Output key value: " + value["key"]);
    console.log("Popup output key value: " + document.getElementById("outputKey"));
    //Set document.getElementById("outputKey") to value["key"]
  });

结果是从存储中检索到的它们的键值是有效的，并且在使用console.log("Output key value: " + value["key"]);时正确地记录到控制台中。我想将此值设置为output元素的值以在popup.html上显示它。我收到一条错误消息，指出document.getElementById("outputKey")为空。

我想知道这是否是因为仅在浏览器中单击扩展按钮时才显示扩展页面。我尝试添加以下内容，但是没有运气。

popup.js

...
window.onload = function () {
    chrome.storage.sync.get("key", function (value) {
    console.log("New key value: " + value["key"]);
    document.getElementById("outputKey") = value["key"];
});

Answer 1

您的代码在DOM完全加载之前正在运行。在DOM完全加载DOMContentLoaded之后，执行代码而不是onload。当您引用/使用该元素时，这将确保该元素在DOM中。

请注意：您还必须使用元素textContent，innerText，value等的属性来设置值。

document.addEventListener("DOMContentLoaded", function(event) {
  chrome.storage.sync.get("key", function (value) {
    console.log("New key value: " + value["key"]);
    document.getElementById("outputKey").value = value["key"];
  }
});

Answer 2

使用以下代码：

document.getElementById("outputKey").value = value["key"];

JavaScript GetElementById为空，但元素具有值

2 个答案: