How Do I Programmatically Change The SRC value of the images using JavaScript

Question

The images do not have unique ids nor do they have unique classes. How do I change the src value for each element from the array of images.

<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
<img src="img4.jpg" />

var images = ['img11.jpg', 'img22.jpg','img33.jpg','img44.jpg'];

so select them by the tag and loop over them. document.querySelectorAll().forEach() is your friend. — epascarello
– epascarello, Commented Dec 16, 2022 at 20:14

Andy · Accepted Answer · 2022-12-16 20:17:04Z

3

The second argument of forEach is the index of the current iterated item.

Grab the image elements with querySelectorAll, and then use forEach to iterate over them updating the src attribute of each image with the element at the appropriate index in the array.

const arr = ['img11.jpg', 'img22.jpg','img33.jpg','img44.jpg'];

const images = document.querySelectorAll('img');

images.forEach((image, index) => image.src = arr[index]);

<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
<img src="img4.jpg" />

answered Dec 16, 2022 at 20:17

Andy

63.7k13 gold badges72 silver badges99 bronze badges

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

Collectives™ on Stack Overflow

How Do I Programmatically Change The SRC value of the images using JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related