Button Click Change Images in Javascript

Question

I'm still learning about Javacripts. This is one of my first assignment at home. However, I can't seem to get the codes to work even I tried follow steps by steps with the instructions. I need to create a slideshow where when I click on the button, there will be a new image until it cycled back to the first one. I checked everything but I still can't figure out what I did wrong. If you can explain and help, I'm very appreciated.

<body onload="startup();">
    <center>

    <img id="banner" src="images/bangkok_thailand.jpg"> 
    <br>
    <button onclick="cycle();">Click Here to Change Image</button>

<script>
        var imgArray = new Array();
        var index = 0;


function cycle() {
            document.getElementById("banner").src = imgArray[index].src;
            index = index + 1;
            if (index > 5 ) {
                index = 0;
            }
            return;

}

function startup()
    {
        imgArray[0] = new Image;
        imgArray[1] = new Image;
        imgArray[2] = new Image;
        imgArray[3] = new Image; 
        imgArray[4] = new Image; 
        imgArray[5] = new Image;

    imgArray[0]. src="images/bangkok_thailand.jpg";
    imgArray[1]. src="images/paris_france.jpg";
    imgArray[2]. src="images/seoul_southkorea.jpg";
    imgArray[3]. src="images/tokyo_japan.jpg";
    imgArray[4]. src="images/istanbul_turkey.jpg";
    imgArray[5]. src="images/amsterdam_netherlands";
    }
    //cycle();
    return;


</script>
</center>

You have a space after 'imgArray[0].' (before 'src') That won't Work. — Poul Bak
– Poul Bak, Commented Aug 25, 2018 at 7:06
Your last 'return' is outside the function, just flying around. Javascript doesn't like that. — Poul Bak
– Poul Bak, Commented Aug 25, 2018 at 7:19

95faf8e76605e973 · Accepted Answer · 2018-08-25 07:15:16Z

1

Firstly, you have a stray return on the script - this causes the function to not get loaded. Secondly, you have a space between the imgArray[x]. and src. Fix the first issue and it should work, the second issue is optional but you are going to want to fix that as well.

I am using https://picsum.photos/ for the demo below. Hope this helps

<body onload="startup();">
  <center>

    <img id="banner" src="https://picsum.photos/400/300/?random">
    <br>
    <button onclick="cycle();">Click Here to Change Image</button>
    <script>
      var imgArray = new Array();
      var index = 0;


      function cycle() {
        document.getElementById("banner").src = imgArray[index].src;
        index = index + 1;
        if (index > 5) {
          index = 0;
        }
        return;
      }

      function startup() {
        imgArray[0] = new Image;
        imgArray[1] = new Image;
        imgArray[2] = new Image;
        imgArray[3] = new Image;
        imgArray[4] = new Image;
        imgArray[5] = new Image;

        imgArray[0].src = "https://picsum.photos/350/300/?random";
        imgArray[1].src = "https://picsum.photos/300/300/?random";
        imgArray[2].src = "https://picsum.photos/250/300/?random";
        imgArray[3].src = "https://picsum.photos/200/300/?random";
        imgArray[4].src = "https://picsum.photos/150/300/?random";
        imgArray[5].src = "https://picsum.photos/100/300/?random";
      }
    </script>
  </center>
</body>

answered Aug 25, 2018 at 7:15

95faf8e76605e973

14.3k4 gold badges30 silver badges56 bronze badges

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

2 Comments

Charlie C. Dang Over a year ago

Thank you! I fixed it and it worked. I was just confused about the //cycle(); at the bottom because it showed on the power point. I'm still not sure what it means

95faf8e76605e973 Over a year ago

It is a function, but it is commented out using //. You're welcome. Welcome to Stack Overflow

Collectives™ on Stack Overflow

Button Click Change Images in Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related