Как мне очистить этот код, чтобы создать список кнопок в JavaScript, который будет отображать указанную c информацию, при этом избавляясь от другого контента?

Question

Я новичок в каждой части этого, поэтому позвольте мне начать с извинений, если я недостаточно краткий или использую неправильную терминологию. Я успешно создал несколько методов, которые позволяют пользователям нажимать различные кнопки на странице, когда при нажатии определенной кнопки c отображается соответствующий контент. Мой вопрос - что я могу сделать, чтобы немного его почистить? Я думал о попытке создать массив для самих кнопок, массив для содержимого и функцию, используя операторы if / else для отображения соответствующего содержимого для различных нажатий кнопок. Если бы не исчез другой контент, я чувствую, что могу что-то сделать. Увы, как я уже сказал, я новичок в этом и любых мыслях о логи c, методах, классах и т. Д. c. это могло бы помочь мне побриться. Спасибо!

Вот как я до сих пор работал. Если вам нужно увидеть HTML, с которым это работает, я более чем рад опубликовать.

function chapter1Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "block";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("1").addEventListener("click", chapter1Display, false);

function chapter2Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "block";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("2").addEventListener("click", chapter2Display, false);

function chapter3Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "block";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("3").addEventListener("click", chapter3Display, false);

function chapter4Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "block";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("4").addEventListener("click", chapter4Display, false);

function chapter5Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "block";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("5").addEventListener("click", chapter5Display, false);

function chapter6Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "block";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("6").addEventListener("click", chapter6Display, false);

function chapter7Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "block";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("7").addEventListener("click", chapter7Display, false);

function chapter8Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "block";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("8").addEventListener("click", chapter8Display, false);

function chapter9Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "block";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("9").addEventListener("click", chapter9Display, false);

function chapter10Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "block";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("10").addEventListener("click", chapter10Display, false);

function chapter11Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "block";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("11").addEventListener("click", chapter11Display, false);

function chapter12Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "block";
}
document.getElementById("12").addEventListener("click", chapter12Display, false);

function refresh() {
  document.getElementById("filler").style.display = "block";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("refresher").addEventListener("click", refresh, false);

Answer 1

Я бы добавил класс chapter ко всем этим элементам с идентификатором ch[x]. Тогда у вас может быть следующая функция:

const showChapter = number => {
    document.querySelectorAll('.chapter').style.display = 'none';
    document.getElementById(`ch${number}`).style.display = "block";
}

Она скрывает все главы, а затем отображает только ту, которую вы запрашиваете.

Приветствия! 100

Answer 2

Я полагаю, это то, что вы ищете?

const navButtons  = document.getElementById('nav-buttons')
  ,   sectionList = document.querySelectorAll('section')
  ;
navButtons.onclick=e=>
  {
  if (!e.target.matches('button')) return
  showSection(e.target.value)
  }
function showSection(sectionId)
  {
  sectionList.forEach(sct=>
    {
    sct.style.display= (sct.id===sectionId) ? 'block':'none'
    })
  }
showSection('filler')

<nav id="nav-buttons">
  <button value="filler">Table of contents</button>
  <button value="ch1">chapter 1</button>
  <button value="ch2">chapter 2</button>
  <button value="ch3">chapter 3</button>
</nav>
<section id="filler">
  <h4>filler</h4>
  filler text
</section>
<section id="ch1">
  <h4>ch1</h4>
  ch1 text
</section>
<section id="ch2">
  <h4>ch2</h4>
  ch2 text
</section>
<section id="ch3">
  <h4>ch3</h4>
  ch3 text
</section>