How To Automatically Change An HTML Image Using JavaScript

Question

NB: I've had a look here for how to change the images on a timer, as oppose to using buttons, but it didn't cater to my code style.

As I'm new to HTML and JS I still don't understand all the aspects and got a little confused on which part they were referring to in translation to how I wrote my code.

CODE:

<!DOCTYPE html>
<html>
  <body>
    <img id="image" src="blank_light.jpg" style="width:100px">
    <p></p>
    <button class="change-image">Change Lights</button>
    <script>
      var imageSources = ["red_light.jpg", "red_and_yellow_light.jpg", "yellow_light.jpg", "green_light.jpg"]
      var buttons = document.getElementsByClassName("change-image")[0];
      var index = 0;

      buttons.addEventListener('click', function() {
        if (index === imageSources.length) {
          index = 0;
        }
        document.getElementById("image").src = imageSources[index];
        index++;
      });

    </script>
  </body>
</html>

I need to remove the buttons and have the images change on a timed basis instead. Ideally every 2 seconds.

Thanks in advance.

It's the same link he posted in the question, it's not the same problem — Mattia Nocerino
– Mattia Nocerino, Commented Feb 2, 2017 at 13:37
@ACOMIT001 Like Mattia kindly said, it's a different problem as the link I posted has a different original format as me. There's no point writing a bunch of code if I don't understand what it means. — freddie.bumder
– freddie.bumder, Commented Feb 2, 2017 at 13:40

Ikhlak S. · Accepted Answer · 2017-02-02 13:47:41Z

8

You need to use setInterval function to change image after every 2 sec

<img id="image" src="blank_light.jpg" style="width:100px">
<p></p>

<script>

var imageSources = ["red_light.jpg", "red_and_yellow_light.jpg", "yellow_light.jpg", "green_light.jpg"]

var index = 0;
setInterval (function(){
  if (index === imageSources.length) {
    index = 0;
  }
  document.getElementById("image").src = imageSources[index];
  index++;
} , 2000);

</script>

CodePen : http://codepen.io/anon/pen/zNWMJK

edited Feb 2, 2017 at 13:47

Ikhlak S.

9,10411 gold badges60 silver badges80 bronze badges

answered Feb 2, 2017 at 13:38

Hardik Gondalia

3,7276 gold badges39 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

freddie.bumder Over a year ago

@asdf_enel_hak Thanks a lot both of you. Am I correct in saying I can remove the <(/)button>

freddie.bumder Over a year ago

The image gets stuck on the first one, without changing at all? Any ideas. Please feel free to proofread the code, bearing in mind I initially copied and pasted your work to Notepad to see if it worked.

Hardik Gondalia Over a year ago

@freddie.bumder : not getting you. Is it working or not?

freddie.bumder Over a year ago

No. The image is staying as the blank traffic light. Not changing to any of the others.

freddie.bumder Over a year ago

Where do I do that? In the original question as an update?

|

Jabbi Syed · Accepted Answer · 2019-02-08 13:53:49Z

0

/CoffeeScript
$(document).ready ->
  imageSources = ["image1.jpg", "image2.png", "image3.png", "image4.png", "image5.png"]
  index = 0
  setInterval ( ->
    if index == imageSources.length
      index = 0
    $('#image-test').attr('src', imageSources[index]);
    index++
    return
  ), 2000

answered Feb 8, 2019 at 13:53

Jabbi Syed

1912 silver badges4 bronze badges

1 Comment

quinz Over a year ago

Please don't post code-only answers. Elaborate what your snippet does and why it solves the problem.

Collectives™ on Stack Overflow

How To Automatically Change An HTML Image Using JavaScript

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related