I am having problems with my JavaScripts which is meant to make a tab gallery display. It hides the images when I choose another gallery, but I also have a presentation text -called "text-poze" and that is not hide when I am choosing another gallery , so the text from Album 1 will be seen when Album 2 is chosen. How can I Fix that?

function album() { // wrap code in IIFE to keep it from global scope
  let links = document.querySelectorAll('a'); // grab all <a> tags that trigger the image gallery
  let imageContainer = document.querySelector('.album1 '); // grab the div that will contain the images
  let imagesCollection = document.querySelectorAll('.img-prezentare');


  function displayImage(imgs, album) { // function to check the data-album attr and check against the button that was clicked
    imgs.forEach((image) => {
      if (image.dataset.album == album) {
        //image.classList.remove('hide');
        image.hidden = false;
      } else {
        //image.classList.add('hide');
        image.hidden = true;
      }
    });
  }


  links.forEach((link) => { // loop through <a> tags and create click event on each 
    link.addEventListener('click', (e) => {
      e.preventDefault();

      console.log(link.textContent);

      if (link.textContent == "album 1") {
        console.log("album 1111111s");
      }

      switch (link.textContent) { // check name of link clicked 
        case "album 1": // link 1 text

          displayImage(imagesCollection, 'album 1'); //display images from album 1
          console.log("album 1111111s");

          break;
        case "album 2": // link 2 text

          displayImage(imagesCollection, 'album 2'); //display images from album 2

          break;
        case "album 3": // link 3 text

          displayImage(imagesCollection, 'album 3'); //display images from album 3

          break;

        case "all": // // link 4 text - display all images at once

          imagesCollection.forEach((image) => {
            image.classList.remove('hide');
          });

          break;
      }

    });
  });

}
window.onload = function() {
  album()
};

<div >
  <a href="#">album 1</a>
  <a href="#">album 2</a>
  <a href="#">album 3</a>
  <a href="#">all</a>
</div>

<div >
  <div >
    <a href="adrbirouri.html"> <img  src="../ADR Birouri/View05.jpg" data-album="album 1"></a>
    <div > ADR Birouri </div>
  </div>

  <div >
    <a href="baiamare.html"><img  src="../Bloc Baia Mare/View05.jpg" data-album="album 1"></a>
    <div > Bloc Baia Mare</div>
  </div>

  <div >
    <a href="nisipari.html"><img  src="../Bloc Nisipari/View01.jpg" data-album="album 1"></a>
    <div >Bloc Nisipari</div>
  </div>
</div>

CodePudding user response：

It seems your code is not doing what you expect and also not what you describe

I advice you to delegate and you likely wanted to do this:

window.addEventListener("DOMContentLoaded", () => {
  const nav = document.querySelector(".selector")
  const links = nav.querySelectorAll("a");
  const albums = document.querySelectorAll(".album");
  nav.addEventListener("click", e => {
    const tgt = e.target.closest("a");
    if (tgt.matches("a")) {
      links.forEach(lnk => lnk.classList.toggle("active",lnk===tgt));
      albums.forEach(album => album.hidden = ![album.id, "all"].includes(tgt.dataset.album));
    }
  })
});

.selector a  {text-decoration: none }
.selector a.active  {text-decoration: underline }

.album img { height: 100px;}

<div >
  <a href="#" data-album="album1" >album 1</a>
  <a href="#" data-album="album2">album 2</a>
  <a href="#" data-album="album3">album 3</a>
  <a href="#" data-album="all">all</a>
</div>

<div >
  <div  id="album1">
    <a href="adrbirouri.html"> <img  src="https://www.wall-street.ro/image_thumbs/thumbs/734/7342c107fcfac43c575acfe686ece344-1063x560-00-86.jpg?v=1469023098"></a>
    <div > ADR Birouri </div>
  </div>

  <div  id="album2" hidden>
    <a href="baiamare.html"><img  src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Baia_Mare-_centru_istoric.jpg"></a>
    <div > Bloc Baia Mare</div>
  </div>

  <div  id="album3" hidden>
    <a href="nisipari.html"><img  src="https://static.wikia.nocookie.net/genealogy/images/4/45/Scoala_Nisipari.jpg/revision/latest/scale-to-width-down/250?cb=20120804221616"></a>
    <div >Bloc Nisipari</div>
  </div>
</div>