JS Image Gallery Only Changes to Last Image-CodePudding

I'm building a vanilla JS image gallery. Something super simple. I've gotten so far as to be able to change the main display image on the click of one of the thumbnails below, however it changes to the 4th (and last) image of the thumbnails and remains like that.

I'm attempting to use a data set to store each thumbnail's URL and access it later.

My best guess is that there's something wrong in my for loop over the thumbnail images. I think what's happening is I'm just grabbing the total number of thumbnails (in this case 4) and returning that value. Which is why it keeps getting changed to the 4th image no matter which thumbnail you click.

I'll post a fiddle but here's my code so far:

HTML

<section id="showcase">
  <div id="display-area">
    <img src="https://source.unsplash.com/wtGWZbiDhGc" id="display-image" alt="unpicked oranges on a tree" />
  </div>
  
  <ul id="thumbnails">
    <li >
      <img src="https://source.unsplash.com/wtGWZbiDhGc" alt=""  data-thumbsrc="https://source.unsplash.com/wtGWZbiDhGc"/>
    </li>
    <li >
      <img src="https://source.unsplash.com/gKR4mOceulU" alt=""  data-thumbsrc="https://source.unsplash.com/gKR4mOceulU"/>
    </li>
    <li >
      <img src="https://source.unsplash.com/Jz4QMhLvGgw" alt=""  data-thumbsrc="https://source.unsplash.com/Jz4QMhLvGgw"/>
    </li>
    <li >
      <img src="https://source.unsplash.com/I7dpBg-Z5Cc" alt="" data-thumbsrc="https://source.unsplash.com/I7dpBg-Z5Cc"/>
    </li>
  </ul>
  
  
</section>

const thumbnail = document.querySelectorAll('.thumbnail');

thumbnail.forEach(function(thumb){
    thumb.addEventListener("click", changeImage);
});


  // elements

  const displayArea = document.querySelector('#display-area');
  let displaysrc = document.querySelector('#display-image'); //  the display image's img tag
  let thumbImg = document.querySelectorAll('.thumb-img'); // all img elements w/ thumb-img class
 
  

  function changeImage(){

    // check current value of display image src
    console.log("current display src "   displaysrc.src); 

    for (var i = 0; i < thumbImg.length; i  ){

      let thumbsrc = thumbImg[i].dataset.thumbsrc;
      
      displaysrc.setAttribute('src', thumbsrc);

    }

    // check new value of display image src
     console.log("new display src "   displaysrc.src); 
};

Fiddle: https://jsfiddle.net/Lutcyp5w/

If you need anymore information, just let me know. Thank you!

CodePudding user response：

You should refer to this (i.e. the target element) somehow inside your event handler to identify the correct element that was clicked. Try this:

let thumbsrc = this.querySelector(".thumb-img").dataset.thumbsrc;

CodePudding user response：

You can get the clicked on element using event.target and then access the dataset of that element to assign it to the src attribute of displaysrc. See snippet

const thumbnail = document.querySelectorAll('.thumbnail');
const displayArea = document.querySelector('#display-area');
let displaysrc = document.querySelector('#display-image'); //  the display image's img tag
let thumbImg = document.querySelectorAll('.thumb-img'); // all img elements w/ thumb-img class

thumbnail.forEach(function(thumb) {
  thumb.addEventListener("click", (event) => displaysrc.setAttribute('src', event.target.dataset.thumbsrc));
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100vh;
}

#showcase {
  width: 100%;
  max-width: 1024px;
  margin: 3% auto 0 auto;
}

#display-area {
  max-width: 1024px;
  height: 550px;
  margin-bottom: 3%;
}

#display-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#thumbnails {
  list-style-type: none;
  display: flex;
  gap: 1%;
  cursor: pointer;
}

.thumbnail {
  width: 100%;
  max-width: 350px;
  height: 200px;
}

.thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

<section id="showcase">
  <div id="display-area">
    <img src="https://source.unsplash.com/wtGWZbiDhGc" id="display-image" alt="unpicked oranges on a tree" />
  </div>

  <ul id="thumbnails">
    <li >
      <img src="https://source.unsplash.com/wtGWZbiDhGc" alt="unpicked oranges on a tree"  data-thumbsrc="https://source.unsplash.com/wtGWZbiDhGc" />
    </li>
    <li >
      <img src="https://source.unsplash.com/gKR4mOceulU" alt="woman standing in front of a blue background with a refracted rainbow of light on her face. "  data-thumbsrc="https://source.unsplash.com/gKR4mOceulU" />
    </li>
    <li >
      <img src="https://source.unsplash.com/Jz4QMhLvGgw" alt="sushi roll on a plate with a cup of soy sauce and chopsticks"  data-thumbsrc="https://source.unsplash.com/Jz4QMhLvGgw" />
    </li>
    <li >
      <img src="https://source.unsplash.com/I7dpBg-Z5Cc" alt="young doe in a forest looking up at the camera"  data-thumbsrc="https://source.unsplash.com/I7dpBg-Z5Cc" />
    </li>
  </ul>


</section>