Нужна помощь с 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

Comments

[Илья]

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');

Для таких вещей циклы есть

Answer 1

[Dmitry]

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

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

Answer 2

[Сергей delphinpro]

<button class="btn-chapter" data-chapter="1">Глава 1</button>
<button class="btn-chapter" data-chapter="2">Глава 2</button>
<button class="btn-chapter" data-chapter="3">Глава 3</button>
<button class="btn-chapter" data-chapter="4">Глава 4</button>
<button class="btn-chapter" data-chapter="5">Глава 5</button>

<div class="chapter" id="chapter-1"><h2>Глава 1: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-2"><h2>Глава 2: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-3"><h2>Глава 3: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-4"><h2>Глава 4: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-5"><h2>Глава 5: Основы Фотошопа - Растровая графика</h2></div>

.chapter {
  display: none;
}
.chapter.is-open {
  display: block;
}

document.addEventListener('DOMContentLoaded', function() {

  const allChapters = document.querySelectorAll('.chapter');

  const closeAllChapters = () => allChapters.forEach(el => el.classList.remove('is-open'));
  const openChapterById = id => document.getElementById(id).classList.add('is-open');;

  document.querySelectorAll('.btn-chapter').forEach(btn => {
    btn.addEventListener('click', () => {
      closeAllChapters();
      openChapterById(`chapter-${btn.dataset.chapter}`);
    });
  });

});