Wordle克隆和本地存储:未捕获的类型错误:无法设置null的属性(设置“innerHTML')[duplicate]

wdebmtf2  于 2022-11-20  发布在  其他
关注(0)|答案(1)|浏览(313)

此问题在此处已有答案

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建议的元素执行顺序有关?

58wvjzkj

58wvjzkj1#

现在问题似乎解决了。在查看JS文件几次后,我发现了一个错误标记的属性。更改后,问题(和错误消息)不再存在。

相关问题