Javascript change images based on timer

Question

I have following HTML code snippet:

<div>
    <div onload="startTimer()">
        <img id="img-showcase" src="/assets/img1.jpg">
    </div>
</div>

And the Javascript snippet:

<script type="text/javascript">

    function displayNextImage() {
        x = (x === images.length - 1) ? 0 : x + 1;
        document.getElementById("img-showcase").src = images[x];
    }

    function startTimer() {
        setInterval(displayNextImage, 3000);
    }

    var images = [], x = 0;
    images[0] = "/assets/img1.jpg";
    images[1] = "/assets/img2.jpg";
    images[2] = "/assets/img3.jpg";
</script>

I wish to make img change dinamically based on setInterval timer... What am i missing?

Side note when you increment `x` doing something with the [modulus operator](https://www.w3schools.com/js/js_arithmetic.asp) can be a little cleaner `x = (x + 1) % images.length;` — Patrick Barr, Apr 04 '17 at 21:56

score 0 · Answer 1 · answered Apr 04 '17 at 21:57

0

You can't add an "onload" event to a div. Try moving this to the body and it should work.

answered Apr 04 '17 at 21:57

jas7457

1,712
13
21

Can you provide some documentation to prove that claim? It's better to show real proof on SO than just saying "trust me". – takendarkk Apr 04 '17 at 21:57
@takendarkk it is a fact.... I will be his documentation source. – epascarello Apr 04 '17 at 21:58
Sure - check out https://www.w3schools.com/jsref/event_onload.asp and look at the "Supported HTML tags:" section – jas7457 Apr 04 '17 at 22:00
https://api.jquery.com/load-event/ I can keep going... – jas7457 Apr 04 '17 at 22:03

Javascript change images based on timer

1 Answers1