Javascript loop indexing issue

Question

Here is 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 to the p tag, which is a child of .progressButton. I need the number to increase with every p tag. I have problems with my javascript loop. I assume the problem is that .text (buttonNumber []); indexing. How to 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]); } 

Answer 1

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

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

in

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

Answer 2

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