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

Question

我使用数字作为元素 id，在 js 中由 i 表示，一旦按下开始按钮，它应该隐藏标题屏幕，更新 i，然后从新的 i 元素中删除隐藏类（隐藏元素）（问题1）和菜单栏元素。问题 1 和菜单栏应留在屏幕上。但是，菜单栏加载，但问题没有，并弹出错误。

无法读取未定义的属性“添加”

// variables

var i = 0;

var id = document.getElementById(i.toString());

var next = document.getElementById("next");

// hiding menu and other screens

menuBar.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 pressed

function 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）