How Can I Set Src And Alt Attributes On An Image Tag Using JavaScript

- 1 answer

JavaScript is something that I am learning bit by bit, so please excuse my ignorance...!

I have a list of images in a gallery, and I am creating a modal on a click event. I have managed to collect all of the sources for the images into an array and have then used the forEach method to appended an li and img tag into a parent ul, with all of the sources going into the src attribute.

My problem is I also have an array of alt attributes as well that I also need to set into the same list of images.

I don't think I can do both attributes in one forEach loop, and it seems too messy to do a second loop for the alt attributes. There must be a simpler way, it's just beyond my current understanding.

Here is the code I already have below, I was wondering if perhaps I should be looking at a JSON object instead rather than this approach?

 $('.gallery-image img').click(function(){
            var images = document.getElementsByClassName('aurora-gallery-image');
            var imageSources = [];
            var imageTitles = [];
            for (var i = 0; i < images.length; i++) {
            function imageFunction(item){
               $('.image-modal ul').append('<li class="image-modal-item"><img class="modal-content" alt="" src="' + item + '" /><p id="aurora-gallery-image-title">  </p></li>');



forEach() passes the array index as the second argument to the callback function. You can use that to get the corresponding element from the imageTitles array

function imageFunction(item, index){
  $('.image-modal ul').append(`<li class="image-modal-item"><img class="modal-content" alt="${imageTitles[i]}" src="${item}" /><p id="aurora-gallery-image-title">  </p></li>`);

But you don't really need the arrays at all. Just do it in the for loop:

for (let i = 0; i < images.length; i++) {
  $('.image-modal ul').append(`<li class="image-modal-item"><img class="modal-content" alt="${images[i].alt}" src="${images[i].src}" /><p id="aurora-gallery-image-title">  </p></li>`);