CODEWITHSUNDEEP
javascriptdomsrc
pasha
pasha

Reputation: 61

How to change an image on click using vanilla JavaScript

I'm new to programming and I'm learning DOM manipulations at this moment. I would appreciate some help.

I need to change the main picture to whatever picture the user will click. I want to use JavaScript only for it.

The main problem that I'm having is that I don't know how to extract the src attribute from the clicked image.

let pics = document.querySelectorAll('.thumbnail');
let pic = document.querySelector('.hero img');
pics.addEventListener('click', function(){
  pic = pics.src;
})
<main role="main">
  <h1>Image Carousel</h1>
  <div class="hero">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/>
  </div>
  <div class="thumbnails">
    <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/></a>
    <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat2.jpg" alt="Closeup of a blue-eyed, grey cat with markings."/></a>
    <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat3.jpg" alt="An orange cat licks its paw."/></a>
    <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat4.jpg" alt="A content brown cat lounges with eyes closed."/></a>
  </div>
</main>

Upvotes: 0

Views: 1174

Answers (2)

Everett Glovier
Everett Glovier

Reputation: 328

You unfortunately cannot set an event listener on an array of elements. You need to traverse all of them and set the listener.

let pics = document.querySelectorAll('.thumbnail');
let pic = document.querySelector('.hero img');
for( let x = 0; x <  pics.length; x++ ){
  pics.item( x ).addEventListener('click', function( event ){
    pic.src = this.getElementsByTagName('img')[0].src;
  });
}

Upvotes: 1

Pablo Verduzco
Pablo Verduzco

Reputation: 121

You have to get all the images in array, iterate that array and add an event listener in each of those to get the src attribute.

let image = document.querySelectorAll('img');
// This is going to return you an array with all the images you have in the document

// here we're iterating that array
for(let i = 0; i < image.length; i++) {
  // Here is like selecting each of those items and adding an event listener
  image[i].addEventListener('click', (e) => {
    // When you click at the image you will get in console the link of that image
    console.log(e.target.src);
  });
}
 <main role="main">
        <h1>Image Carousel</h1>
        <div class="hero">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/>
        </div>
        <div class="thumbnails">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat2.jpg" alt="Closeup of a blue-eyed, grey cat with markings."/>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat3.jpg" alt="An orange cat licks its paw."/>
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat4.jpg" alt="A content brown cat lounges with eyes closed."/>
        </div>
</main>

Upvotes: 0

Related Questions