Нужна помощь с JS и стилями. Где я ошибся?

Question

[anonim2004]

В общем, я пытаюсь сделать простую страницу для электронного учебника. Нужно сделать так, чтобы, при нажатии на кнопки в левом сайдбаре, в окне выводились нужные главы учебника. Я планировал реализовать это посредством "display: none" для общего класса и удалением класса через скрипт, однако ничего не работает.

const button1 = document.getElementbyId('mybtn1');
const button2 = document.getElementbyId('mybtn2');
const button3 = document.getElementbyId('mybtn3');
const button4 = document.getElementbyId('mybtn4');
const button5 = document.getElementbyId('mybtn5');
const button6 = document.getElementbyId('mybtn6');
const button7 = document.getElementbyId('mybtn7');

const chapter = document.getElementbyId('page1');
const chapter2 = document.getElementbyId('page2');
const chapter3 = document.getElementbyId('page3');
const chapter4 = document.getElementbyId('page4');
const chapter5 = document.getElementbyId('page5');
const chapter6 = document.getElementbyId('page6');
const chapter7 = document.getElementbyId('page7');

const chaptersAll = document.querySelectorALL('.page');

function add(){
	chapter.classList.remove('page');
}

<section>
				<ul class="sidebar">
				<li class="sidebar2"><button onclick="add();" class="sidebar3" value="1" id="mybtn1">Глава 1</button></li>
				<li class="sidebar2"><button class="sidebar3" value="2" id="mybtn2">Глава 2</button></li>
				<li class="sidebar2"><button class="sidebar3" value="3" id="mybtn3">Глава 3</button></li>
				<li class="sidebar2"><button class="sidebar3" value="4" id="mybtn4">Глава 4</button></li>
				<li class="sidebar2"><button class="sidebar3" value="5" id="mybtn5">Глава 5</button></li>
				<li class="sidebar2"><button class="sidebar3" value="6" id="mybtn6">Глава 6</button></li>
				<li class="sidebar2"><button class="sidebar3" value="7" id="mybtn7">Глава 7</button></li>

			</ul>
				
			</section>

			<main>
				<div class="page" id="page1">
					<h2>Основы Фотошопа - Растровая графика</h2>
				</div>
                       </main>

<script src="script.js"></script>

В css файле указан display:none для класса page

Answer 1

[Dmitry]

1) нет такого метода getElementbyId, есть getElementById
2) Если не обернуть скрипт в window.addEventListener( 'load', () => { //script }); то на этапе выполнения скрипта getElementById вернут null, т.к. эти дом-элементы еще не созданы.

Учитесь пользоваться devtools и средой разработки, вроде VS Code с плагинами, они вам не дадут ошибаться в названиях методов (метод querySelectorALL тоже не существует)