Javascript gallery, adding images with "for" loop

Question

I'm creating gallery in my project, but i don't want to spam clear html and repeat it 20 times in my code. I want to create loop in javascript to get the numbers of images from my folder and later add this into one div. I've created code but i don't know how to step it. Code:

function addingImages() {

    for (var i = 0; i <= ***; i++) {
        var image = document.createElement("img");
        image.setAttribute("src", "images/1.jpg");
        document.querySelector(".gallery").appendChild(image);
    }
}

*** - i don't know what should be there. and i know i need variable to increment later numbers of images like 1.jpg , 2.jpg, 3.jpg etc.

Answer 1

You need to loop from 1 to 20, so set loop count to 20. Then use index from loop in setAttribute function like this:

   function addingImages() {
    for (var i = 1; i <= 20; i++) {
        var image = document.createElement("img");
        image.setAttribute("src", "images/" + i + ".jpg");
        document.querySelector(".gallery").appendChild(image);
   }
}