Home Javascript functions related to HTML/CSS elements
Reply: 1

Javascript functions related to HTML/CSS elements

redreaper752
1#
redreaper752 Published in 2017-12-08 00:20:27Z

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.

Rodrigo
2#
Rodrigo Reply to 2017-12-08 00:53:49Z

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";
});
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.242843 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO