CODEWITHSUNDEEP
javascripthtmlcssarraysimage
Charlie C. Dang
Charlie C. Dang

Reputation: 37

Button Click Change Images in Javascript

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>

Upvotes: 2

Views: 52

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

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>

Upvotes: 1

Related Questions