更新控制 html 的变量时无法读取未定义错误的属性“添加”

Question

我使用数字作为元素 id，在 js 中由 i 表示，一旦按下开始按钮，它应该隐藏标题屏幕，更新 i，然后从新的 i 元素中删除隐藏类（隐藏元素）（问题1）和菜单栏元素。问题 1 和菜单栏应留在屏幕上。但是，菜单栏加载，但问题没有，并弹出错误。无法读取未定义的属性“添加”// variablesvar i = 0;var id = document.getElementById(i.toString());var next = document.getElementById("next");// hiding menu and other screensmenuBar.classList.add('hide');next.classList.add('hide');document.getElementById("1").setAttribute("class", "hide");document.getElementById("2").setAttribute("class", "hide");document.getElementById("3").setAttribute("class", "hide");document.getElementById("4").setAttribute("class", "hide");document.getElementById("5").setAttribute("class", "hide");// show the next screen when the next button is pressedfunction nextScreen() {  id.classList.add('hide');  if (i == 0) {    menuBar.classList.remove('hide');  }  i ++;    next.classlist.add('hide');  id.classList.remove('hide');}start.onclick = nextScreen;next.onclick = nextScreen;    <div class="container">      <!-- title screen -->      <div id='0' class='title'>        <h1>          Welcome to<br>the<br><strong>IMPOSSIBLE QUIZ</strong>        </h1>        <button id='start' class='green button'>          START        </button>      </div>            <!-- question 1 -->      <div id='1' class='question'>        <span class='questionIndicator'>          Question 1        </span>        <br>        <h2>          What is after        </h2>        <button id='secretAnswer' class='secret'>          ...?        </button>        <button id='q1WrongAnswer' class='answer button'>          this?        </button>        <button id='q1WrongAnswer' class='answer button'>          the answer        </button>        <button id='q1WrongAnswer' class='answer button'>          no idea        </button>      </div>

Answer 1

ID 为 2-5 的元素尚不存在，因此您无法调用setAttribute()它们。

另外，next.classlist.add('hide')应该是next.classList.add('hide')（camelCase）