JavaScript GetElementById имеет значение Null, но элемент имеет значение - PullRequest
Новая
       15

JavaScript GetElementById имеет значение Null, но элемент имеет значение

0 голосов
/ 03 февраля 2019

Я пытаюсь передать значение из JavaScript в HTML для расширения Chrome.Я получаю сообщение об ошибке, что элемент, на который ссылаются, имеет значение null.

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"];
});

Ответы [ 2 ]

0 голосов
/ 03 февраля 2019

используйте ниже код: 

document.getElementById("outputKey").value = value["key"];
0 голосов
/ 03 февраля 2019

Ваш код работает до полной загрузки DOM.Вместо onload выполняйте свой код после полной загрузки DOM с DOMContentLoaded.Это гарантирует, что элемент находится в 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"];
  }
});
...