calling function inside script tag not working

Question

i have created an automated slideshow which should change the picture after every 2 secs; i call the function changeSlide() at first then it should recursively call itself using the function setTimeout. but this doesn't work when page is first started or the page is refreshed.

but when i click on the button it starts working.

let slideIndex = 0;

    changeSlide();

    function changeSlide(){             
        slideIndex++;

        let images = document.getElementsByClassName('image');      
        for (let i = 0; i<images.length;i++){
            images[i].style.display="none";
        }

        if (slideIndex>= images.length){
            slideIndex = 0;
        }

        images[slideIndex].style.display = "block"; 
        setTimeout(changeSlide,2000);

    }

This is my html code.

<div class="w3-display-container w3-content">
        <img class="image" src="city.jpg" style="width: 100%;height:500px;" >
        <img class="image" src="profile.png" style="width: 100%; height:500px;display:none;" >
        <img class="image" src="img_girl.jpg" style="width: 100%;height:500px; display:none;" >

    </div>
    <button onClick="changeSlide()">Click Me</button>

i want my slideshow to start as soon as i start my page.

change `images[slideIndex].style.display = "block";` to `if(images[slideIndex])images[slideIndex].style.display = "block";` or place your script tag after html. it seems your code executed before tags loaded — Zeeshan Anjum, Apr 01 '19 at 19:36

score 0 · Answer 1 · answered Apr 01 '19 at 19:35

0

instead of changeSlide(); do window.onload=changeSlide; that way you make sure the DOM exists when calling the function

answered Apr 01 '19 at 19:35

jonathan Heindl

721
4
15

thanks this worked for me – dead pool Apr 01 '19 at 19:37

score 0 · Answer 2 · answered Apr 01 '19 at 19:35

0

You currently seem to not have any code that tells your page to run the function when it's loaded. Try adding the following to your body tag:

<body onload="changeSlide()">
    <!-- your other HTML code here -->
</body>

answered Apr 01 '19 at 19:35

`You currently seem to not have any code that tells your page to run the function when it's loaded ` he calls the function just on the line before he declares the function, not nice, but he calls it – caramba Apr 01 '19 at 19:38
Read over that. As others suggested, his code should work if the JS is placed after the HTML, though I'd recommend removing that line and using my solution so code placement isn't an issue – Apr 01 '19 at 19:43

Mohammad Javad Naderi · Answer 3 · 2019-04-01T20:18:20.207

0

You should call changeSlide when browser has parsed your HTML markup, so it can access HTML elements. You have some options to make this work correctly.

Place your JS code after your HTML markup (After the <div> element containing images). Or just call changeSlide after it:

<script>
    let slideIndex = 0;
    function changeSlide(){
        ...
    }
</script>

<div class="w3-display-container w3-content">
    ...
</div>

<script>
    changeSlide();
</script>

Run changeSlide after page load using DOMContentLoaded event:

window.addEventListener('DOMContentLoaded', function(event){
    changeSlide();
});

// Or just:

window.addEventListener('DOMContentLoaded', changeSlide);

edited Apr 01 '19 at 20:18

answered Apr 01 '19 at 19:39

Mohammad Javad Naderi

468
4
12

1.Place your JS code after your HTML markup. Or just call changeSlide after HTML: this doesn't work 2. run changeSlide after page load works – dead pool Apr 01 '19 at 19:50
@deadpool I have tested both options and they work. `changeSlide` must be defined before calling it. I updated my answer. – Mohammad Javad Naderi Apr 01 '19 at 19:57
it works if i add just before
but if i put it just after the
then it doesn't work. – dead pool Apr 01 '19 at 20:05
@deadpool Yes, as I said, It works if you put `` after `
...
`. – Mohammad Javad Naderi Apr 01 '19 at 20:21

calling function inside script tag not working

3 Answers3