此问题在此处已有答案:
Why does jQuery or a DOM method such as getElementById not find the element?(6个答案)
3天前关闭。
在创建一个themed Wordle clone for my site时,我想使用本地存储来保存用户的游戏状态。在大多数情况下,我认为我已经做到了这一点-但目前遇到了一个Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
错误,我不能得到底部。
这个错误的影响是,在“活动”游戏中刷新时,键盘拒绝呈现-游戏的瓦片扩展到关键字的宽度。错误信息表明它不能与HTML中的ID匹配,但我检查了这个,getElementByID
与div类game-keyboard
匹配。
JS代码(相关部分)为......(完整的JS代码可在here中找到)
const storedKeyboardContainer =
window.localStorage.getItem("keyboardContainer");
if (storedKeyboardContainer) {
document.getElementById("game-keyboard").innerHTML =
storedKeyboardContainer;
addKeyboardClicks();
}
和
function preserveGameState() {
window.localStorage.setItem("guessedWords", JSON.stringify(guessedWords));
const keyboardContainer = document.getElementById("game-keyboard");
window.localStorage.setItem(
"keyboardContainer",
keyboardContainer.innerHTML
);
const boardContainer = document.getElementById("game-container");
window.localStorage.setItem("boardContainer", boardContainer.innerHTML);
}
我收到的错误消息...
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
at loadLocalStorage (borodle.js:3:158)
at HTMLDocument.<anonymous> (borodle.js:1:1547)
存放键盘的HTML元素...
<div id="game-keyboard">
<div class="keyboard-row">
<button class="keyboard-button" data-key="q">q</button>
<button class="keyboard-button" data-key="w">w</button>
<button class="keyboard-button" data-key="e">e</button>
<button class="keyboard-button" data-key="r">r</button>
<button class="keyboard-button" data-key="t">t</button>
<button class="keyboard-button" data-key="y">y</button>
<button class="keyboard-button" data-key="u">u</button>
<button class="keyboard-button" data-key="i">i</button>
<button class="keyboard-button" data-key="o">o</button>
<button class="keyboard-button" data-key="p">p</button>
</div>
<div class="keyboard-row">
<div class="borodle-half"></div>
<button class="keyboard-button" data-key="a">a</button>
<button class="keyboard-button" data-key="s">s</button>
<button class="keyboard-button" data-key="d">d</button>
<button class="keyboard-button" data-key="f">f</button>
<button class="keyboard-button" data-key="g">g</button>
<button class="keyboard-button" data-key="h">h</button>
<button class="keyboard-button" data-key="j">j</button>
<button class="keyboard-button" data-key="k">k</button>
<button class="keyboard-button" data-key="l">l</button>
<div class="borodle-half"></div>
</div>
<div class="keyboard-row">
<button class="keyboard-button" data-key="enter" class="wide-button">Enter</button>
<button class="keyboard-button" data-key="z">z</button>
<button class="keyboard-button" data-key="x">x</button>
<button class="keyboard-button" data-key="c">c</button>
<button class="keyboard-button" data-key="v">v</button>
<button class="keyboard-button" data-key="b">b</button>
<button class="keyboard-button" data-key="n">n</button>
<button class="keyboard-button" data-key="m">m</button>
<button class="keyboard-button" data-key="del" class="wide-button">DEL</button>
</div>
</div>
我使用教程来构建初始游戏,然后使用a second part来合并本地存储以保存游戏状态。JS代码(我最终合并了它)中是否有一个基本错误-或者它可能与here建议的元素执行顺序有关?
1条答案
按热度按时间58wvjzkj1#
现在问题似乎解决了。在查看JS文件几次后,我发现了一个错误标记的属性。更改后,问题(和错误消息)不再存在。