I want to be able to show the hidden images one by one as it is there but without needing an id, I would like to be able to make them run using the 'history' class or any other class anyway but being the same class for all.
let historyElements= [ 'imagen1','imagen2','imagen3'];
for (let i=0;i < historyElements.length; i++) {
setTimeout(openHistory,2000 * i,historyElements[i]);
}
function openHistory(historyName) {
let x = document.getElementsByClassName("history");
for (let i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(historyName).style.display = "block";
}
body{
margin: 0;
}
img{
width: 100%;
}
<img id="imagen1" class="history" src="https://www.wampstore.com/store/image/cache/data/Wamp/Products/Vallejo/Flat%20Red-900x900.jpg">
<img id="imagen2" class="history" src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-129-Purple_1400x.jpg?v=1464824795">
<img id="imagen3" class="history" src="https://www.wampstore.com/store/image/cache/data/Wamp/Products/Vallejo/Deep%20Sky%20Blue-900x900.jpg">
You can solve it by foreaching a querySelectorAll
documentation: https://www.w3schools.com/jsref/met_document_queryselectorall.asp
You can also create your own function to hide or show elements.
EDIT2: Here is a codepen link of the code demo https://codepen.io/rtelenta/pen/ZdpMRJ