Невозможно прочитать свойство add для неопределенной ошибки при обновлении переменных, управляющих html

Question

Я использую числа в качестве идентификаторов элементов, представленных в js как i, и после нажатия кнопки пуска следует скрыть экран заголовка, обновить i, а затем удалить класс скрытия (который скрывает элемент) из новый элемент i (вопрос 1) и элемент строки меню. Вопрос 1 и строка меню должны быть оставлены на экране. Однако строка меню загружается, а вопрос - нет, и появляется сообщение об ошибке.

Невозможно прочитать свойство 'add' из неопределенного

// 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>

      <!-- menu bar below questions -->
      <div id="menuBar" class="menuBar">
        <button id='mainMenu' class='small red button'>
          MAIN MENU
        </button>
        <button id='next' class='small next button'>
          NEXT QUESTION
        </button>
      </div>
    </div>

Answer 1

Элементы с идентификатором 2-5 еще не существуют, поэтому вы не можете вызвать setAttribute() для них.

Кроме того, next.classlist.add('hide') должно быть next.classList.add('hide') (camelCase)