Show different images onClick event (JavaScript)

So, I don’t have any working knowledge of JavaScript, but I am wondering why this does not work for me. I have 4 buttons, 4 different divs with different images, when one button is clicked I would like the images to change to the category which is displayed on the button.

i.e Button: “Windows” –Button is clicked–> Show images of windows

Button “Doors” –Button is clicked–> show images of Doors

JavaScript file is imported to HTML document:

<head>
    <script type="text/javascript" src="script.js"></script>
</head>

const showChoosenCategory = event => {
  const getId = event.id
  const links = document.querySelectorAll('.work-category button')
  for (i = 0; i < links.length; i++) {
    if (links[i].hasAttribute('class')) {
      links[i].classList.remove('active')
    }
  }

  event.classList.add('active')
  const getCategory = document.querySelector(`.category-${getId}`)
  const categories = document.querySelectorAll('div[class ^= "category-"]')
  for (i = 0; i < categories.length; i++) {
    if (categories[i].hasAttribute('class')) {
      categories[i].classList.remove('showCategory')
      categories[i].classList.add('hideCategory')
    }
  }

  getCategory.classList.remove('hideCategory')
  getCategory.classList.add('showCategory')
}

.hideCategory {
  display: none;
}

<div class="gallery" id="gallery">
  <div class="work-category">
    <button class="category active" id="windows">Fönster</button>
    <button class="category" id="doors">Dörr</button>
    <button class="category" id="furniture">Möbler</button>
    <button class="category" id="misc">Övrigt</button>
  </div>
  <div class="category-windows showCategory">
    <div class="imageslist">
      <img src="assets/img_window.jpg" class="gallery-image">
    </div>
  </div>
  <div class="category-doors hideCategory">
    <div class="imageslist">
      <img src="assets/img_door.jpg" class="gallery-image">
    </div>
  </div>
  <div class="category-furniture hideCategory">
    <div class="imageslist">
      <img src="assets/img_furniture.jpg" class="gallery-image">
    </div>
  </div>
  <div class="category-misc hideCategory">
    <div class="imageslist">
      <img src="assets/img_misc.jpg" class="gallery-image">
    </div>
  </div>
</div>

How Can I make this work?

Answer

This is a small solution based on the script you provided. I have modified/added some attributes in order to simplify the script. The logic is the following:

the button dictates which div is going to be display

var controls = document.querySelector('.work-category');
var gallery = document.querySelector('.gallery');

controls.addEventListener('click', displayCategory);


function displayCategory(ev) {
  var selectedControl = controls.querySelector('.active');
  var activeCategory = gallery.querySelector('.showCategory');
  // exiting early if the selected control
  // is the clicked button
  if (ev.target === selectedControl) { return; }

  var categoryId = ev.target.dataset.category;
  var category = gallery.querySelector('.category-' + categoryId);
  
  ev.target.classList.add('active');
  category.classList.add('showCategory');
  selectedControl.classList.remove('active');
  activeCategory.classList.remove('showCategory');
}

.active {
  background: skyblue;
}

.category-windows,
.category-doors,
.category-furniture,
.category-misc {
  display: none;
}

.showCategory {
  display: block;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 <div class="gallery" id="gallery">
    <div class="work-category">
        <button class="category active" data-category="windows">Fönster</button>
        <button class="category" data-category="doors">Dörr</button>
        <button class="category" data-category="furniture">Möbler</button>
        <button class="category" data-category="misc">Övrigt</button>
    </div>
    <div class="category-windows showCategory">
        <div class="imageslist">
            <img src="assets/img_window.jpg" alt="window" class="gallery-image">
        </div>
    </div>
    <div class="category-doors">
        <div class="imageslist">
            <img src="assets/img_door.jpg" alt="door" class="gallery-image">
        </div>
    </div>
    <div class="category-furniture">
        <div class="imageslist">
            <img src="assets/img_furniture.jpg" alt="furniture" class="gallery-image">
        </div>
    </div>
    <div class="category-misc">
        <div class="imageslist">
            <img src="assets/img_misc.jpg" alt="misc" class="gallery-image">
        </div>
    </div>
</div>
</body>
</html>

Advertisement

Answer