Javascript loop indexing issue

Question

Here's the HTML

<li class="carousel-btn-wrapper">
  <div class="progressButton">
    <p></p>
  </div>
  <button class="videoCaroselButton">Welcome</button>
</li>
<li class="carousel-btn-wrapper">
  <div class="progressButton">
    <p></p>
  </div>
  <button class="videoCaroselButton">Video Name</button>
</li>
<li class="carousel-btn-wrapper">
  <div class="progressButton">
    <p></p>
  </div>
  <button class="videoCaroselButton">Another Video Name</button>
</li>

I am trying to add a number in the p tag that is a child of the .progressButton. I need the number to increase with every p tag. I'm having issues with my javascript loop. I assume the issue is in the way .text(buttonNumber[]); is indexing. How do I solve this?

var videoSrcArray = ['url.com/adf', 'url.com/asf', 'url.com/sdf', 'url.com/asdf','url.com/asdfl']
var buttonNumber = "";
var i;
for (i = 1; i < videoSrcArray.length - 1; i++) {
  buttonNumber += i ;
  $('.progressButton').children('p').text(buttonNumber[1]);
}

First if you want to add a number why did you initialized buttonNumber as String? And second what do you mean by calling a string with []? — Roni Axelrad
– Roni Axelrad, Commented Dec 16, 2015 at 1:35
buttonNumber is being initialized as "". Adding an integer to it will result in concatenated strings. — thedarklord47
– thedarklord47, Commented Dec 16, 2015 at 1:36
I'm getting 1 as if it is being concatinated or 123456789101112131415, since there are 15 items in the real array. — gooser
– gooser, Commented Dec 16, 2015 at 1:39

thedarklord47 · Accepted Answer · 2015-12-16 01:49:57Z

4

You actually don't need buttonNumber at all. Delete it (lines 2 and 5) and then change:

$('.progressButton').children('p').text(buttonNumber[1]);

to:

$('.progressButton').children('p').eq(i-1).text(i);

edited Dec 16, 2015 at 1:49

answered Dec 16, 2015 at 1:36

thedarklord47

3,3723 gold badges34 silver badges56 bronze badges

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

3 Comments

gooser Over a year ago

Doing so gets the length of the array only. So each p tag has "15" in it since that is the total number of items within the array.

gooser Over a year ago

i would recommend one more edit. ".eq(i-1).text(i)" so it the number starts at 1 rather than 0. But thank you.

thedarklord47 Over a year ago

ah my bad, I didn't notice your loop started at 1 haha

Roni Axelrad · Accepted Answer · 2015-12-16 01:38:40Z

0

Try init buttonNumber as 0. Then, use var to init the i of your for loop, and then use buttonNumber.toString() instead of buttonNumber[]

answered Dec 16, 2015 at 1:38

Roni Axelrad

4395 silver badges14 bronze badges

Collectives™ on Stack Overflow

Javascript loop indexing issue

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related