System of multiple choices in Javascript

Question

Staff I am doing the following function on a Web Site: XXX-A | XXX-B | XXX-C | XXX-D When one clicks on the XXX-A only the DIV with A content will appear and so on... But I managed to make the content appear but I can’t make the others disappear, follows below the code:

		function MudarMethod() {
			const content01 = document.getElementById('content01');

			if(document.GetElementById('content2').style.display == 'block')
			   document.GetElementById('content3').style.display == 'block')
			   document.GetElementById('content4').style.display == 'block')
			   {
				   document.GetElementById('content2').style.display = 'none'
				   document.GetElementById('content3').style.display = 'none'
				   document.GetElementById('content4').style.display = 'none'
				   content01.style.display = 'block'
				}
		}

		document.getElementById('button1').addEventListener('click', () => MudarMethod());
		

#content01 {
	display: none;
}

#content02 {
	display: block;
}

#content03 {
	display: none;
}

#content04 {
	display: none;
}

	<div class="background-content">
		<div class="align-content">
			<h1>Métodos de ensino</h1>
			<div id="methodlearn">
				<button id="button1">XXX</button>
				<button id="button2">XXX</button>
				<button id="button3">XXX</button>
				<button id="button4">XXX</button>
				<div id="content01">Conteúdo 01</div>
				<div id="content02">Conteúdo 02</div>
				<div id="content03">Conteúdo 03</div>
				<div id="content04">Conteúdo 04</div>
			</div>
		</div>
	</div>

I put the display:block in content 2 to just take the test and see if it’s catching.

Personal thank you!

Answer 1

You don’t need to use as many id’s for this. Only with class is possible and much simpler. Note that there is still a syntax error in your code:

The "get" in document.GetElementById is tiny -> document.getElementById

Use a class on the buttons and a class in the contents' Ivs. For example, in the buttons you put class="btn" and in the Ivds class="content":

<div id="methodlearn">
   <button class="btn">1</button>
   <button class="btn">2</button>
   <button class="btn">3</button>
   <button class="btn">4</button>
   <div class="content">Conteúdo 01</div>
   <div class="content">Conteúdo 02</div>
   <div class="content">Conteúdo 03</div>
   <div class="content">Conteúdo 04</div>
</div>

As the intention is that each button is related to a div, it is very easy to click the "1" button and show the first div; click the "2" button and show the second div, and so on. You just need to find the index (index) of button clicked.

Since there are 4 buttons with the same class, the first is index 0, the second index 1 etc. The same thing with Divs. The first div with the class "content" is index 0, the second index 1 etc... Soon, if you discover the index of the button clicked, you can find the related div.

Just create a Event Handler onclick for each button, find the index of the button through a loop for and show the div with the same index, and use another for to hide the others.

And in CSS, just put .content{ display: none; } to hide all Divs at once.

See how it looks (I put some comments in the code to facilitate understanding):

// seleciona todos os botões pela classe
var btns = document.getElementsByClassName("btn");

for(var bts_ of btns){
   
   bts_.onclick = function(){
      
      // seleciona todos os botões com a classe .btn dentro de #methodlearn
      var childs = document.querySelectorAll("#methodlearn .btn");
      var index = 0;
      
      // determina o index do botão com base 0
      for(var el of childs){
         if(this == el) break;
         index++;
      }
      
      var contents = document.getElementsByClassName("content");
      
      // esconde todos
      for(var cts_ of contents){
         cts_.style.display = "none";
      }
      
      // mostra só a div do botão que foi clicado
      contents[index].style.display = "block";
      
   }
   
}

.content{
   display: none;
}

<div class="background-content">
   <div class="align-content">
      <h1>Métodos de ensino</h1>
      <div id="methodlearn">
         <button class="btn">1</button>
         <button class="btn">2</button>
         <button class="btn">3</button>
         <button class="btn">4</button>
         <div class="content">Conteúdo 01</div>
         <div class="content">Conteúdo 02</div>
         <div class="content">Conteúdo 03</div>
         <div class="content">Conteúdo 04</div>
      </div>
   </div>
</div>