How to loop my For loop variable inside my string using JavaScript [duplicate]

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);

Narendra Jadhav · Accepted Answer · 2018-04-26 11:22:34Z

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, 2018 at 11:22

Narendra Jadhav

10.3k15 gold badges35 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gvs Akhil Over a year ago

Nice and easy code...Thanks a lot

Narendra Jadhav Over a year ago

@GvsAkhil hearty welcome

Yann Pellegrini · Accepted Answer · 2018-04-26 11:19:07Z

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, 2018 at 11:19

answered Apr 26, 2018 at 11:18

Yann Pellegrini

8633 gold badges9 silver badges20 bronze badges

3 Comments

Gvs Akhil Over a year ago

oops i missed a + after my i

Yann Pellegrini Over a year ago

And does it work now? If yes you can mark as solved. If no please post additional error messages you might get.

Gvs Akhil Over a year ago

ya its asking wait fr 10 mins to mark it as solved

Collectives™ on Stack Overflow

How to loop my For loop variable inside my string using JavaScript [duplicate]

2 Answers 2

2 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Linked

Related