Mi intención es crear class="dot" en función de la cantidad de elementos en la matriz llamada count, luego usar el siguiente bucle for:
for(var i = 0; i < count.length; i++)
Entonces, lo que quiero obtener es un solo <span class="dot" onclick="currentSlide(1)"></span> donde el argumento currentSlide se actualiza automáticamente en función del ciclo for, por lo que tengo i en lugar de 1, 2,3 etc
¿Es posible hacer esto? ¿Me puedes ayudar? Soy nuevo en html y javascript.
<script> var slideIndex = 1; showSlides(slideIndex); function currentSlide(n) { showSlides(slideIndex = n); } var count = ['img1','img2','img3','img4'] </script> <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>Esto debería funcionar usando template literal .
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>