How to loop my For loop variable inside my string using JavaScript

Question

I have some 72 pics names fun1,fun2......fun72... So instead of writing 72 img tags I just wanna create img tags using Script. But I am unable to loop between these 72 pics because I have no idea of how to call for loop variable inside a String.

Method 1

// For images
let pics = document.getElementById("pics-thumbs");
let divholder = document.createDocumentFragment();
for (let i = 1; i < 73; i++) {
    let img = document.createElement("img");
    img.class = "img-responsive";
    img.src = "images/fun+i.jpg";
    divholder.appendChild(img);
}
pics.appendChild(divholder);

Method 2

// For images
let pics = document.getElementById("pics-thumbs");
let divholder = document.createDocumentFragment();
for (let i = 1; i < 73; i++) {
    let img = document.createElement("img");
    img.class = "img-responsive";
    img.src = "images/fun" + i ".jpg";
    divholder.appendChild(img);
}
pics.appendChild(divholder);

score 2 · Answer 1 · answered Apr 26 '18 at 11:22

2

You could do like this

DEMO

let pics = document.getElementById("pics-thumbs"),
  imgArr = [];
for (let i = 1; i < 73; i++) {

  imgArr.push(`<img class="img-responsive" src="images/fun${i}.jpg">`);
}
pics.innerHTML = imgArr.join('<br>')

<div id="pics-thumbs"></div>

answered Apr 26 '18 at 11:22

Narendra Jadhav

10,052
15
33
44

Nice and easy code...Thanks a lot – Gvs Akhil Apr 26 '18 at 11:23
@GvsAkhil hearty welcome – Narendra Jadhav Apr 26 '18 at 11:24

Yann Pellegrini · Accepted Answer · 2018-04-26T11:19:07.633

1

Use

img.src="images/fun" + i + ".jpg";

Or, with EcmaScript 6,

img.src=`images/fun${i}.jpg`;

It is called concatenation.

edited Apr 26 '18 at 11:19

answered Apr 26 '18 at 11:18

Yann Pellegrini

793
3
7
19

oops i missed a + after my i – Gvs Akhil Apr 26 '18 at 11:18
And does it work now? If yes you can mark as solved. If no please post additional error messages you might get. – Yann Pellegrini Apr 26 '18 at 11:20
ya its asking wait fr 10 mins to mark it as solved – Gvs Akhil Apr 26 '18 at 11:20

How to loop my For loop variable inside my string using JavaScript

2 Answers2