CODEWITHSUNDEEP
javascript
davvv
davvv

Reputation: 802

How can I build elements dynamically incrementing a number by one?

I am making a gallery. All images are named 1.jpg, 2.jpg, 3.jpg etc - it extends all the way up to 200.jpg.

Copy and paste will be OK, but very time consuming. 

  <div class="slideshow-container">
          <div class="slideshowDisplay fade">
            <img src="/images/media/1.jpg" width="100%">
          </div>

          <div class="slideshowDisplay fade">
            <img src="/images/media/2.jpg" width="100%">
          </div>

          <div class="slideshowDisplay fade">
            <img src="/images/media/3.jpg" width="100%">
          </div>

Can I use a for-loop or similar to create all the elements for me? My only problem is that, a for loop is used to repeat a code block multiple times is it not, so this for me wouldn't work.

Is there another way that I can create elements without having to spend a long time simply incrementing numbers by hand?

So far I have: 

for(var i=0; i < 200; i++){
   var newDiv = document.createElement('div');
   newDiv.className = 'slideshowDisplay fade';
}

Nothing else...

Any guidance much appreciated.

Upvotes: 0

Views: 418

Answers (2)

user1106925
user1106925

Reputation:

Basic DOM creation and appending

You're only missing appending the new element to the slideshow-container and adding its content. You can use the i variable to create the increment image src.

var sc = document.querySelector(".slideshow-container")
for(var i=0; i < 200; i++){
   var newDiv = sc.appendChild(document.createElement('div'));
   newDiv.className = 'slideshowDisplay fade';

   var img = newDiv.appendChild(document.createElement("img"));
   img.width="100%";
   img.src = "/images/media/" + (i + 1) + ".jpg";
}

String concatenation

The means of creating the src is called "string concatenation". In other words, we create a new string from multiple parts. First the "/images/media/" string, then the value of i, but adjusted up by one, and finally the ".jpg" part.

Making helper functions

FWIW, it's nice to have a personal micro-library that you use to handle certain repetitive tasks. One such inclusion can be a function for creating new Elements.

function create(elem, props, par) {
  var el = document.createElement(elem)
  for (var p in props) {
    el[p] = props[p]
  }
  return par ? par.appendChild(el) : el
}

This takes a little verbosity out of creating and appending the new elements.

var sc = document.querySelector(".slideshow-container")
for(var i=0; i < 200; i++){
   var newDiv = create("div", {className: "slideshowDisplay fade"}, sc);
   create("img", {width: "100%", src: "/images/media/"+(i+1)+".jpg"}, newDiv);
}

Different approach to a helper function

Or instead of having the function receive the parent to which it is appended, you could allow it to receive an arbitrary number of child elements that it will append to itself.

function create(elem, props, ...children) {
  var el = document.createElement(elem)
  for (var p in props) {
    el[p] = props[p]
  }
  children.forEach(ch => el.appendChild(ch))
  return el
}

Then you can nest calls to create in a way that mirrors the new DOM structure.

var sc = document.querySelector(".slideshow-container")
for(var i=0; i < 200; i++){
   sc.appendChild(
     create("div", {className: "slideshowDisplay fade"}, 
       create("img", {width: "100%", src: "/images/media/"+(i+1)+".jpg"})
     )
   );
}

Upvotes: 2

kind user
kind user

Reputation: 41893

Actually you need just one parent div in your DOM. Then just use functions like document.createElement and appendChild to store the newly created divs with pictures inside the parent element.

var source = "/images/media/";
var parent = document.getElementById('parent');

for (var i = 0; i < 10; i++) {
  var newDiv = document.createElement('div');
  newDiv.className = 'slideshowDisplay fade';
  var img = document.createElement('img');
  img.src = source + i + '.jpg';
  img.width = '100%';
  newDiv.appendChild(img);
  parent.appendChild(newDiv);
}
<div class="slideshow-container" id='parent'>

</div>

Upvotes: 1

Related Questions