CODEWITHSUNDEEP
javascripthtmlonclick
sajax63
sajax63

Reputation: 13

Changing images using on click with arrays in javascript

When ever I try to click on the image, the image changes but the next image in the array is not displayed

<!doctype html>
<html>
    <head>
        <title>
            slides
        </title>
        <script type="text/javascript">
            function nextslide(){
                var images = new Array()
                images[0]= "home.jpg" 
                images[1]= "left.jpg"
                images[2]= "right.jpg"
                var currentpic=0
                var lastpic= images.lenth-1;
             if (currentpic =lastpic)
             {
                currentpic=0;
                document.getElementById('slide').src = images[currentpic];
             }else
              {
                currentpic++;
                document.getElementById('slide').src = images[currentpic];
              }
            }
        </script>   
    </head>
        <body>
            <img src="home.jpg" id="slide" onclick="nextslide()">
        </body>

</html>

Help would be greatly appreciated. Thank you for the help.

Upvotes: 0

Views: 3316

Answers (2)

Kishan
Kishan

Reputation: 1190

try this

1.) Specify globallythis variable 

 var currentpic=0;

2.) Change in images.lenth to images.length

3.) Change if (currentpic =lastpic) to if (currentpic ==lastpic) 

<!doctype html>
<html>
    <head>
        <title>
            slides
        </title>
        <script type="text/javascript">
          var currentpic=0;
            function nextslide(){
                var images = new Array()
                images[0]= "http://thewowstyle.com/wp-content/uploads/2015/04/Cartoon.jpg" 
                images[1]= "http://vignette2.wikia.nocookie.net/epicrapbattlesofhistory/images/1/10/Penguin-cartoon.png/revision/latest?cb=20141207223335"
                images[2]= "http://cliparts.co/cliparts/kiK/Byz/kiKByzxoT.jpg"

                var lastpic= images.length-1;
             if (currentpic ==lastpic)
             {
                currentpic=0;
                document.getElementById('slide').src = images[currentpic];
             }else
              {
                currentpic++;
                document.getElementById('slide').src = images[currentpic];
              }
            }
        </script>   
    </head>
        <body>
            <img src="home.jpg" id="slide" onclick="nextslide()">
        </body>

</html>

Upvotes: 1

user2684182
user2684182

Reputation:

There are several things wrong with your code. Here is the fixed version:

<!doctype html>
<html>
    <head>
        <title>slides</title>
        <script type="text/javascript">
            var images = new Array();
            images[0] = "home.jpg";
            images[1] = "left.jpg";
            images[2] = "right.jpg";
            var currentpic = 0;
            var lastpic = images.length-1;
            function nextslide()
            {
                if (currentpic == lastpic)
                {
                    currentpic = 0;
                    document.getElementById('slide').src = images[currentpic];
                }
                else
                {
                    currentpic++;
                    document.getElementById('slide').src = images[currentpic];
                }
            }
        </script>   
    </head>
    <body>
        <img src="home.jpg" id="slide" onclick="nextslide()">
    </body>
</html>

What's wrong?

  1. var lastpic= images.lenth-1; You're missing a g in length.
  2. if (currentpic =lastpic) To check if var1 is the same as var2, you need to use == instead of =
  3. You're missing a couple of semicolons.
  4. You should declare currentpic, images, and lastpic outside of your function to make it actually set the image as the next image.

To try and debug yourself

Always check your browser's developer console for errors.

Upvotes: 1

Related Questions