Wordle克隆游戏Local Storage报错：Uncaught TypeError排查求助

我为自己的网站开发了一款主题化Wordle克隆游戏，想通过Local Storage保存用户游戏状态，大部分功能已经实现，但现在碰到Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')错误，找不到问题根源。这个错误导致在活跃游戏里刷新页面时，键盘无法渲染，游戏tile会扩展到关键词应有的宽度。我确认了getElementById和HTML里ID为game-keyboard的div是匹配的，但错误提示说找不到对应元素。

相关JS代码 #

加载LocalStorage的代码 #

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>

我先通过教程搭建了初始游戏，再参考第二部分教程整合Local Storage保存游戏状态。请问是JS代码存在根本性错误，还是元素执行顺序的问题？

内容的提问来源于stack exchange，提问作者Pete Hayman