Increment "i" inside for loop?

Question

I have a presentation made with vanilla javascript. And I have a for loop that creates sliders. In this for loop I have to

for (var i = 0; i < prod_lorem.img; i++) {
    inhtml += "<div class="swiper-slide"><div class="img"><img src="assets/img/products/' + products_cat + '/' + prod_lorem.img + '/' + i + '.png" alt=""></div><div class="img"><img src="assets/img/products/' + products_cat + '/' + prod_lorem.img + '/' + i++ + '.png" alt=""></div></div>";
}

In second img class i++ and i+1 (this prints 01) didn't worked and I can't use two loops. I have to do this in one loop to not break the code. Thanks a lot.

You are doing string concatenation inside a string literal? Makes no sense. — epascarello, Jun 28 '21 at 15:59
It is a duplicate of above question in c++ (the syntax is same). — kvetis, Jun 28 '21 at 16:02
There seems to be something wrong with your alternation of double `"` and single `'` quotation marks. Furthermore you are using a template strings, where your variables should be enclosed within `${` and `}`, without concatenation — secan, Jun 28 '21 at 16:04
Thank you for your comments but answer from here solved it already. But thanks again. — Eren GELGEC, Jun 28 '21 at 17:17

Spectric · Accepted Answer · 2021-06-28T15:59:21.830

1

Use ++i:

for (var i = 0; i < prod_lorem.img; i++) {
    inhtml += '<div class="swiper-slide"><div class="img"><img src="assets/img/products/' + products_cat + '/' + prod_lorem.img + '/' + i + '.png" alt=""></div><div class="img"><img src="assets/img/products/' + products_cat + '/' + prod_lorem.img + '/' + ++i + '.png" alt=""></div></div>';
}

edited Jun 28 '21 at 15:59

answered Jun 28 '21 at 15:57

Spectric

30,714
6
20
43

Charlie Bamford · Answer 2 · 2021-06-28T16:26:00.613

1

The ` symbol is a template literal. You're joining your strings incorrectly. You need to use ${} to do replacements.

Also, you don't want to increment i inside the loop, as it is used to control the loop.

    inhtml += `
    <div class="swiper-slide">
        <div class="img">
            <img src="assets/img/products/${products_cat}/${prod_lorem.img}/${i}.png" alt="">
        </div>
        <div class="img">
            <img src="assets/img/products/${products_cat}/${prod_lorem.img}/${i + 1}.png" alt="">
        </div>
    </div>`;

edited Jun 28 '21 at 16:26

answered Jun 28 '21 at 16:03

Charlie Bamford

1,268
5
18

Oh sorry totally forgot about it. Editing question now. – Eren GELGEC Jun 28 '21 at 16:05
prod_lorem.img was a variable also – epascarello Jun 28 '21 at 16:07

score 1 · Answer 3 · answered Jun 28 '21 at 16:07

Have a look at this

const prod_lorem = { img : 5 }
const products_cat = "abc";
const html = Array.from({ length: prod_lorem.img }).map((_,i) => `
    <div class="swiper-slide">
        <div class="img">
            <img src="assets/img/products/${products_cat}/${i}/${i}.png" alt="">
        </div>
        <div class="img">
            <img src="assets/img/products/${products_cat}/${i}/${i+1}.png" alt="">

        </div>
    </div>`).join("");



console.log(html)

Increment "i" inside for loop?

3 Answers3