I want to create instagram-type stories, but I don't know how to make it so that when I click on a button, from time to time I go to the other button and so on... show the images that have the same class in the function.
<button id="btn" onclick="openHistory('imagen1')">Imagen 1</button>
<button id="btn" onclick="openHistory('imagen2')">Imagen 2</button>
<button id="btn" onclick="openHistory('imagen3')">Imagen 3</button>
<img id="imagen1" class="history" src="">
<img id="imagen2" class="history" src="">
<img id="imagen3" class="history" src="">
<script>
function openHistory(historyName) {
var i;
var x = document.getElementsByClassName("history");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(historyName).style.display = "block";
}
</script>
You don't have to "push buttons". Pressing a button calls a function, and what you want is to call that function. You can use setTimeout or setInterval to launch this function every so often:
Using
setInterval
, you can make a function run every x milliseconds. In the example that I have given you below, once you press one of the buttons, after showing the corresponding history, a function is executed (every 10 seconds), which searches among all the images for the one with thedisplay="block"
, hides it, and puts thedisplay="block"
to the next imageThis is one way to do it the way you put it.