How to show a div and hide others with Javascript?

Question

Hello, I have the following code that is working but I want to improve it. Any suggestions?

click event add

[1, 2, 3].forEach(num => {
  document.getElementById(`btn-lupa${num}`).addEventListener("click", () => {
    esquemaLupa(num);
  });
});

hide function div

function esquemaLupa(num) {

  if (num == 1) {
    document.getElementById(`feed-lupa-${num}`).style.display = "block";
    document.getElementById(`feed-lupa-2`).style.display = "none";
    document.getElementById(`feed-lupa-3`).style.display = "none";
  }

  if (num == 2) {
    document.getElementById(`feed-lupa-${num}`).style.display = "block";
    document.getElementById(`feed-lupa-1`).style.display = "none";
    document.getElementById(`feed-lupa-3`).style.display = "none";
  }
  if (num == 3) {
    document.getElementById(`feed-lupa-${num}`).style.display = "block";
    document.getElementById(`feed-lupa-2`).style.display = "none";
    document.getElementById(`feed-lupa-1`).style.display = "none";
  }

}

Html

<button id="btn-lupa1">1</button> 
<button id="btn-lupa2">2</button> 
<button id="btn-lupa3">3</button> 
<div id="feed-lupa-1">div1</div> 
<div id="feed-lupa-2">div2</div> 
<div id="feed-lupa-3">div3</div>

Answer 1

There are several ways to improve code at CSS and HTML level (for example, use class instead of id), but you can improve Javascript code by simplifying the function:

function esquemaLupa(num) {
   document.querySelectorAll("[id^='feed-lupa-']").forEach( (e)=>{ e.style.display = "none"; });
   document.getElementById(`feed-lupa-${num}`).style.display = "block";
}

The document.querySelectorAll("[id^='feed-lupa-']") selects all elements starting with id feed-lupa- and hides them, then displays only that it has the value in num:

[1, 2, 3].forEach(num => {
  document.getElementById(`btn-lupa${num}`).addEventListener("click", () => {
    esquemaLupa(num);
  });
});

function esquemaLupa(num) {
   document.querySelectorAll("[id^='feed-lupa-']").forEach( e=>{
      e.style.display = "none";
   });
   document.getElementById(`feed-lupa-${num}`).style.display = "block";
}

<button id="btn-lupa1">1</button>
<button id="btn-lupa2">2</button>
<button id="btn-lupa3">3</button>
<div id="feed-lupa-1">div1</div>
<div id="feed-lupa-2">div2</div>
<div id="feed-lupa-3">div3</div>

You only need to be careful not to use another element starting with id feed-lupa- except these feed-lupa-1, feed-lupa-2 and feed-lupa-3.

Using class

Using class instead of id is much easier and avoids possible conflicts of id:

document.querySelectorAll('.btn-lupa').forEach((e,i) => {
  e.addEventListener("click", e => {
    esquemaLupa(i);
  });
});

function esquemaLupa(i) {
   document.querySelectorAll('.feed-lupa').forEach( e=>{
      e.style.display = "none";
   });
   document.querySelectorAll('.feed-lupa')[i].style.display = "block";
}

<button class="btn-lupa">1</button>
<button class="btn-lupa">2</button>
<button class="btn-lupa">3</button>
<div class="feed-lupa">div1</div>
<div class="feed-lupa">div2</div>
<div class="feed-lupa">div3</div>

See that the parameters of forEach (e,i) return the element (e) and the index (i), and in the other function you use the i as an index to show the div with its class that has the index [i].