I'm trying to see if all variables have display: none and if so, show var slide0. However, the code is only working with var slide8, if it is active (display:block) var slide0 does not appear. Otherwise, if the other variables are active, they remain active and var slide0 appears when it shouldn't.

What am I doing wrong?

    var slide0 = document.querySelector('#slideshow-zero'); 
    var slide1 = document.querySelector('#slideshow-one');
    var slide2 = document.querySelector('#slideshow-two');
    var slide3 = document.querySelector('#slideshow-three');
    var slide4 = document.querySelector('#slideshow-four');
    var slide5 = document.querySelector('#slideshow-five');
    var slide6 = document.querySelector('#slideshow-six');
    var slide7 = document.querySelector('#slideshow-seven');
    var slide8 = document.querySelector('#slideshow-eight');
    
    var slides = [slide0, slide1, slide2, slide3, slide4, slide5, slide6, slide7, slide8];
    
    for (var i = 0; i < slides.length; i  ){
    if (slides[i].style.display === "none") {
        slide0.style.display = "block";
    } else {
        slide0.style.display = "none";
    }
} 

CodePudding user response：

if(!slides.find(slide => slide.style.display !== "none")){
    slide0.style.display = "block"
} else {
    if(slide0.style.display !== "block") {
       slide0.style.display = "none"
    }
}