how do I create a function and image tag repeat over and over with javascript?

Question

I'm trying to set up a portfolio for a photography website and when I get photos I add multiple at a time, is there a way to use javascript to automate the process of creating a tag as many time as I need with the link counting up.

I've tried to look in other places and nothing really showed up.

<div class="container" id="Gallery">
        <figure class="gallery__item gallery__item--1"><img src="./img/image1.jpg" alt="image1" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--2"><img src="./img/image2.jpg" alt="image2" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--3"><img src="./img/image3.jpg" alt="image3" class="gallery__img"></figure>
</div>

function addElement() {
            var figure = document.createElement("figure");
            document.getElementById('Gallery').appendChild(figure);
            figure.className += 'gallery__item';

            var photo = document.createElement("img");
            document.getElementById('gallery__item').appendChild(photo);
            photo.className += 'gallery__img';
        }

I would like to get javascript to recreate these lines of code to a set amount of times, say if there is 10 files in a folder the code would recreate this line ten times. As well as the src of the image counts up for example "image1.jpg, image2.jpg, image3.jpg, ...."

Why don't you just simply `.append()` the html through looping over it? — Bilal Ahmed, Oct 17 '19 at 10:32

score 1 · Accepted Answer · answered Oct 17 '19 at 10:31

Use data-attr to pass such values.

function solution() {
  const _listElNodeList = document.querySelectorAll('.container');
  _listElNodeList.forEach((_listEl) => {
    const count = _listEl.dataset.count;
    for (let i = 1; i <= count; i++) {
      const figure = document.createElement('figure');
      figure.classList.add('gallery__item');
      figure.classList.add('gallery__item--' + i);
      const img = document.createElement('img');
      img.classList.add('gallery__img');
      img.src = "./img/image" + i + ".jpg";
      img.alt = 'image' + i;
      figure.appendChild(img);
      _listEl.appendChild(figure);
    }

  });
}

solution();

<div class="container" id="Gallery" data-count="10"></div>

Sergiu Elmi · Answer 2 · 2019-10-17T10:32:59.473

You can use template literals to create the html inside <div class="container" id="Gallery"> and append it in a loop.

If you have the pictures inside an array, loop then over and add them to your div.

const div = document.getElementbyId('Gallery');

for (i = 0; i < pictures.length; i++) {
  div.innerHTML += `<figure class="gallery__item gallery__item--${i}"><img src="${picture[i]}" alt="image${i}" class="gallery__img"></figure> `
}

Or something similar, but search for template literals.

score 0 · Answer 3 · answered Oct 17 '19 at 10:24

0

I think it's able to do this.

var currentImageIndex = 0;
function addElement() {
    currentImageIndex ++;
    ...
    photo.src = 'gallery__img';
}

That's it.

answered Oct 17 '19 at 10:24

STAR-SSS

30
3

amos guata · Answer 4 · 2019-10-17T10:40:44.980

supposed you don't want to use any handy frameworks to help you achieve this, your code could look as follows:

<html>
<head>
</head>
<body>
  <div class="container" id="Gallery">
  </div>
  
  <script>

 function buildImages() {
  
  var NUMBER_OF_IMAGES = 10;
  var gallary = document.getElementById('Gallery')

  for (var currentImageNumber=1; currentImageNumber <=10; currentImageNumber++) {
   var figure = document.createElement("figure");
   var photo = document.createElement("img");
   
   var currentImageName = "image" + currentImageNumber.toString();
   
   figure.className = 'gallery__item';
   photo.className = 'gallery__img';
   photo.src = "./img/" + currentImageName + ".img";
   photo.alt = currentImageName;
   figure.appendChild(photo);

   gallary.appendChild(figure);
  }
 }

 buildImages();
</script>
</body>
</html>

notice that the function appears at the end of the body tag so that all the DOM will be loaded before it runs its important so that var gallary = document.getElementById('Gallery') will work correctly explanation

Remy · Answer 5 · 2019-10-17T11:12:56.900

Assuming you can use ES6 syntax, this solution requires no fixed quantity of files. The key line is: photos.forEach(x => addElement(x));. I've added the GalleryPhotoFiles class with example application for additional context.

Consider passing your photo information to addElement(), as a parameter. This will make it more extensible, for future use.

class GalleryPhotoFiles {
    constructor(imageSource, alt, etc) {
        this.imageSource = imageSource;
        this.alt = alt;
        this.etc = etc;
    }

    imageSource = '';
    alt = '';
    etc = '';
}

const photo1 = new GalleryPhotoFiles('./img/image1.jpg', 'image1', 'etc'),
    photo2 = new GalleryPhotoFiles('./img/image2.jpg', 'image2', 'etcc'),
    photo3 = new GalleryPhotoFiles('./img/image3.jpg', 'image3', 'etccc');

// Assuming you have an array of files (I'm calling them photos)
const photos = [photo1, photo2, photo3];

// apply your function to each file
photos.forEach(x => addElement(x));

function addElement(galleryFile: GalleryPhotoFiles) {

    const figure = document.createElement('figure');
    document.getElementById('Gallery').appendChild(figure);

    // You might want to add info from the photo objects
    figure.className += `gallery__item_${galleryFile.alt}`;

    const photo = document.createElement('img');
    document.getElementById('gallery__item').appendChild(photo);
    photo.className += `gallery__img__${galleryFile.etc}`;
    photo.src = galleryFile.imageSource;
}

how do I create a function and image tag repeat over and over with javascript?

5 Answers5