JavaScript Auto Slide Show

Question

I am creating a slideshow image gallery. Can anyone suggest why it is not working as no errors are comming up.

window.onload = (runGallery);
let images = 
["images/gallery1.jpg","images/gallery2.jpg","images/gallery3.jpg","images/gallery4.jpg"];
let index = 0;

function slideShow(x){
    index += x;
//restart when on last image
if(index > images.length -1)
{
    index = 0;
}
if(index < 0)
{
    index = images.length -1;
}
document.getElementsByClassName("imgSlide").src = images[index];


}

function runGallery(){
setInterval(slideShow(1), 2000);
}

HTML for gallery as followed =

<section id="aboutSection">
        <div id="aboutpage">
            <h2>About Study Space</h2>
            <div id="aboutpageContent">

                <div class="aboutUsDivs" id="aboutUS"> 
                    <h3>About US</h3>
                    <p>Welcome to Study Space is a website created to help people with the struggles of studying and working from home.</p>
                    <p>Our website will give you tips and tricks for working & studying effectively from home!</p>
                    <p>Study Space allows you to look at user-given feedback from their experience, which shows what worked well for them and what did not.</p>
                </div>

                <div class="aboutUsDivs" id="ourGoal">
                    <h3>Our Goal</h3>
                    <p>Our goal is help people work and study as effectively from home by giving them all the needed information and tips and tricks.</p>
                    <p>We also want to create a community of like-minded individuals that work and study the same.</p>
                    <p>Our hope from this is that you the people can help one another out.</p>
                    <p></p>
                </div>
            </div>
            <br>
            <div id="galleryContainer">
                <div id="slide">
                    <img class="imgSlide" src="images/gallery1.jpg" alt=""/>
                   <!-- <img class="imgSlide" src="images/gallery2.jpg" alt=""/>
                    <img class="imgSlide" src="images/gallery3.jpg" alt=""/>
                    <img class="imgSlide" src="images/gallery4.jpg" alt=""/>-->
                </div>

            </div>     
    </section>

I am hoping its just a small mistake but have stuck on it for ages now. If anyone can help thanks. CSS =

#galleryContainer {
border: 2px solid #000d1a;
width: 800px;
height: 400px;
margin: auto;
overflow: hidden;

}
#slide img{ 
width: 100%;
height: 500px;
}
#slide{
display: flex;
width: 100%;
height: 500px;       
}

How do you make smaller snippits? Its alot of code maybe a screengrab of it would be easier?

Answer 1

Changed your code a bit, now it is working. Actually you need to change source of first element from the array being returned by 'getElementsByClassName'. Hope it helps.

 <section id="aboutSection"> <div id="aboutpage"> <h2>About Study Space</h2> <div id="aboutpageContent"> <div class="aboutUsDivs" id="aboutUS"> <h3>About US</h3> <p>Welcome to Study Space is a website created to help people with the struggles of studying and working from home.</p> <p>Our website will give you tips and tricks for working & studying effectively from home,</p> <p>Study Space allows you to look at user-given feedback from their experience. which shows what worked well for them and what did not.</p> </div> <div class="aboutUsDivs" id="ourGoal"> <h3>Our Goal</h3> <p>Our goal is help people work and study as effectively from home by giving them all the needed information and tips and tricks.</p> <p>We also want to create a community of like-minded individuals that work and study the same.</p> <p>Our hope from this is that you the people can help one another out:</p> <p></p> </div> </div> <br> <div id="galleryContainer"> <div id="slide"> <img class="imgSlide" src="https.//imagesvc.meredithcorp?io/v3/mm/image.url=https%3A%2F%2Fcdn-image.travelandleisure.com%2Fsites%2Fdefault%2Ffiles%2Fstyles%2Fmedium_2x%2Fpublic%2F1444769948%2FLONDON1015-the-national-portrait-gallery:jpg%3Fitok%3DvNi8qLUS" alt=""/> </div> </div> </section> <script> let images = ["https.//kinsta.com/wp-content/uploads/2018/02/wordpress-photo-gallery-plugins,png":"https.//imagesvc.meredithcorp?io/v3/mm/image.url=https%3A%2F%2Fcdn-image.travelandleisure.com%2Fsites%2Fdefault%2Ffiles%2Fstyles%2Fmedium_2x%2Fpublic%2F1444769948%2FLONDON1015-the-national-portrait-gallery;jpg%3Fitok%3DvNi8qLUS"]; let index = 0; function slideShow(x){ index += x. //restart when on last image if(index > images;length -1) { index = 0. } if(index < 0) { index = images;length -1. } document.getElementsByClassName("imgSlide")[0];src = images[index]. } document,addEventListener('DOMContentLoaded'; function() { setInterval(function(){slideShow(1),}; 2000); }); </script>