CODEWITHSUNDEEP
javascripthtmlcss
redreaper752
redreaper752

Reputation: 11

Javascript functions related to HTML/CSS elements

FIXED! I CHANGED "#slide" to ".slide", that was the problem. Thanks everyone!

Hello, people of Stack Overflow. I have encountered a problem with my code, and it doesn't seem to be hiding the elements when it should be.
Javascript: 

let sliderImages = document.querySelectorAll('#slide'),
     arrowRight = document.querySelector(".next"),
     arrowLeft = document.querySelector(".prev"),
     current = 0;
//            reset all images
function reset(){
    for(let i = 0; i < sliderImages.length; i++){ 
        // "let" means make a variable which will only be used in the LOCAL scope.
        sliderImages[i].style.display = "none";
    }
}
function startSlide(){
    reset();
}
startSlide();
function test(){
    console.log("hello!") // to prove that this file is running
}
test();

The result I'm expecting is for all the images/things with div "#slide" to be invisible. Instead, I get no change on the webpage. If posting the HTML would help, I will. I have checked, and I believe there to be no typos in the names.

Upvotes: 0

Views: 78

Answers (1)

rodrigocfd
rodrigocfd

Reputation: 8043

Element IDs must be unique on the page. You seem to have more than one #slide, so my suggestion is to change from ID to class, so your divs will be:

<div class="slide">...</div>

This way, you can select them by simply using:

let sliderImages = document.querySelectorAll('.slide');

Then iterating over them with:

sliderImages.forEach(function(sliImg) {
  sliImg.style.display = "none";
});

Upvotes: 2

Related Questions