Show different images onClick event (JavaScript)

Question

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?

if(categories[i].hasAttribute('class')){ does not make sense — epascarello
– epascarello, Commented Feb 4, 2021 at 17:10

AngelSalazar · Accepted Answer · 2021-02-04 18:02:47Z

1

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>

edited Feb 4, 2021 at 18:02

answered Feb 4, 2021 at 17:25

AngelSalazar

3,1131 gold badge19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sixtenson Over a year ago

Thanks for the answer! However, when I run the code snippet here at stackoverflow, it works like a charm. But when I straight off copy and paste it into: index.html, style.css and script.js saves it to disk and runs it (same browser) it does not. (Does not change a thing)

AngelSalazar Over a year ago

I wonder how you are recreating it locally. Keep in mind that the script should be declared before the </body> tag

Sixtenson Over a year ago

I tried copy and paste your answer without changing a thing, except adding: <script src="script.js"></script> inside <head> tags. Also tried putting the whole script inside <script> tags (within the <head> tags.

Sixtenson Over a year ago

My Bad! Just learned that the <script src="script.js"></script> is suppose to go after the html code I would like to change. Thanks a lot for your answer!

Collectives™ on Stack Overflow

Show different images onClick event (JavaScript)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related