Have div and span based on the number of elements

var slideIndex = 1;
//showSlides(slideIndex);

function currentSlide(n) {
  showSlides(slideIndex = n);
}

var count = ['img1', 'img2', 'img3', 'img4']
for (var i = 0; i < count.length; i++) {
  document.querySelector('div').innerHTML += `
 <span class="dot" onclick=currentSlide(${i})></span> 
 `
}
console.log(document.body.innerHTML)

<div style="text-align:center">
  <!--
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
   -->
</div>

var slideIndex = 1;
//showSlides(slideIndex);

function currentSlide(n) {
  showSlides(slideIndex = n);
}

var count = ['img1', 'img2', 'img3', 'img4']
for (var i = 0; i < count.length; i++) {
document.body.innerHTML += `
 <span class="dot" onclick=currentSlide(${i})></span> 
 `
}
console.log(document.querySelectorAll('span'))

<div style="text-align:center">

</div>