Insert HTML element based on length of other element in for Loop

Question

So I want to insert a span element x times based on the length of another html element as with a for loop. I am getting the correct amount returned but I get undefined in the html. I know I am doing something wrong in the loop, but can't see where? I have looped over arrays and returned the value before via a for loop, but inserting an element based on the count loop I have not. So I should be inserting the <span class="pagination-bullet"></span> say 4 times based on count. In html i get <<s<sp<spa So definitely something is not right.

    var counterElem = document.querySelectorAll('.slider-carousel-slide');
    var count = counterElem.length;
    var paginationCount = count;
    var parentElem = document.querySelector('#main-carousel-pagination');
    var paginationElement = document.createElement('SPAN');
    paginationElement.innerHTML = '<span class="pagination-bullet"></span>';
    var insert = '';
    for (i = 0; i < count; i++ ) {      
      insert += `<span class="swiper-pagination-bullet">`[i];
      parentElem.append(insert);
    }

So what I would expect is if count = 4, then the html would be:

<span class="pagination-bullet"></span>
<span class="pagination-bullet"></span>
<span class="pagination-bullet"></span>
<span class="pagination-bullet"></span>

t">`[i]; <-- what is that [i] ??? doing there? Where is the closing </span> ? — epascarello
– epascarello, Commented Jul 17, 2020 at 19:22

epascarello · Accepted Answer · 2020-07-17 19:39:24Z

1

When you are doing xxxxx[0] you are saying give me the first index of the string. Hence why you are seeing that weird output.

Assuming you want the number, you would use ${} in your string template literal.

insert += `<span class="swiper-pagination-bullet">${i}</span>`;

without the number

insert += `<span class="swiper-pagination-bullet"></span>`;

Can also build the string without the loop.

var insert = Array(count).fill('<span class="swiper-pagination-bullet"></span>').join();
parentElem.innerHTML = insert;

edited Jul 17, 2020 at 19:39

answered Jul 17, 2020 at 19:26

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

4 Comments

Sole Over a year ago

Thanks please see updated with HTML to give better understanding.

Sole Over a year ago

Thanks, So why didn't I need the [i] anywhere in the html, is that only for looping over arrays to get the index?

epascarello Over a year ago

[i] is how you reference an index, you are not trying to reference an array/character so it is not needed.

Sole Over a year ago

I havn't looked into Array(count) yet.. still studying.

toto · Accepted Answer · 2020-07-17 19:27:59Z

1

Example:

var counterElem = document.querySelectorAll('.slider-carousel-slide');
var count = counterElem.length;
var paginationCount = count;
var parentElem = document.querySelector('#main-carousel-pagination');
var paginationElement = document.createElement('SPAN');
paginationElement.innerHTML = '<span class="pagination-bullet"></span>';
var insert = "";
for (i = 0; i < count; i++ ) {      
          insert += "<span class=\"swiper-pagination-bullet\">" + [i] + "</span>";
}
parentElem.append(insert);

answered Jul 17, 2020 at 19:27

toto

1,1882 gold badges13 silver badges31 bronze badges

1 Comment

Sole Over a year ago

Thanks please see updated with HTML to give better understanding.

Collectives™ on Stack Overflow

Insert HTML element based on length of other element in for Loop

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related