Creating a numbered element with vanilla js

Question

I am using the dom to create some html elements. Button to be exact. I am pretty new to javascript so any advice would be appreciated.

The js I am using for this is based on a nodelist of divs. I am using a for loop to create buttons that are based on each object in the nodelist (each div spawns a button).

Here is the js:

let indInit = function(){
	for(i = 0; i < slides.length; i++){
		document.querySelector('.gallery-indicator-nav').innerHTML +=
		'<button class="gallery-indicator" onclick="currentSlide(1)></button>';
	}
};
indInit();

Obviously, I end up with

<div class="gallery-indicator-nav">
<button class="gallery-indicator" onclick="currentSlide(1)></button>
<button class="gallery-indicator" onclick="currentSlide(1)></button>
<button class="gallery-indicator" onclick="currentSlide(1)></button>
</div>

I would like my buttons to generate like this:

<div class="gallery-indicator-nav">
<button class="gallery-indicator" onclick="currentSlide(1)></button>
<button class="gallery-indicator" onclick="currentSlide(2)></button>
<button class="gallery-indicator" onclick="currentSlide(3)></button>
</div>

I am assuming I need to use some sort or math object and concatenation but research on google has been confusing to say the least. I figure there must be a simple solution =)

Answer 1

If you're using innerHTML you can treat it like any other strings, so:

***.innerHTML = 'xxxxxxx' + i + 'xxxxxx';

can be used;

Maybe you want to try to create the button element and attach an EventListener:

btn = document.createElement(....);
btn.addEventListener( .... );