I would like to achieve that when all the images have been seen the box that contains them id 'box' is closed, the box is activated with jquery with the same button that calls the image to be displayed, but I want to be able to open and close the box with javascript, close it when all the images have been seen obviously.
How do I solve it?
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";
}
/* Utilizo jquery para abrir la caja pero quisiera hacerlo todo con javascript */
$('.imagen').click(function(){
$('.caja').css({
"display": "flex"
});
});
.caja{
background-color: #ddd;
justify-content: center;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="imagen" onclick="openHistory('imagen1')">Imagen 1</button>
<button class="imagen" onclick="openHistory('imagen2')">Imagen 2</button>
<button class="imagen" onclick="openHistory('imagen3')">Imagen 3</button>
<div id="caja" class="caja">
<div id="imagen1" class="history">
<img src="https://www.wampstore.com/store/image/cache/data/Wamp/Products/Vallejo/Flat%20Red-900x900.jpg">
</div>
<div id="imagen2" class="history">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-129-Purple_1400x.jpg?v=1464824795">
</div>
<div id="imagen3" class="history">
<img src="https://www.wampstore.com/store/image/cache/data/Wamp/Products/Vallejo/Deep%20Sky%20Blue-900x900.jpg">
</div>
</div>
You can run the first loop one more time to hide all images:
<
►<=
for (let i=0;i <= historyElements.length; i++)
You pass a parameter to the function
openHistory
to see if it has finished viewing all the images.And before applying the
display: block;
check the parameter that you have passed:Edit after OP's changes
From what I understand you want the images/box to close once they have all been seen. This is how I would do it, with a parallel array to mark the images that have already been viewed.
The code does the following:
if
it and mark it as seen and show it.if
and restart thearray
viewed images afalse
to start over.Code:
Entire snippet:
I don't quite understand the logic of what you need to do, but it works (change the tense to make it more noticeable)