Changing images using on click with arrays in javascript

Question

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.

Put all the variables outside the function, otherwise you're just creating the same variables every time the function is called. — adeneo
– adeneo, Commented Jun 5, 2015 at 3:53
Also if (currentpic =lastpic) is an assignment, not a comparison. Use if (currentpic ==lastpic) to compare the values. — Always Learning
– Always Learning, Commented Jun 5, 2015 at 3:54

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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?

var lastpic= images.lenth-1; You're missing a g in length.
if (currentpic =lastpic) To check if var1 is the same as var2, you need to use == instead of =
You're missing a couple of semicolons.
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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 5, 2015 at 3:56

user2684182

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

2 Comments

Always Learning Over a year ago

You still set currentpic to zero every time the nextslide() is called, so it will always show the second image.

Medet Tleukabiluly Over a year ago

Also, variables reinitializing every time, so currentpic will never change. Needs to be outside of nextslide

Kishan · Accepted Answer · 2015-06-05 04:19:28Z

1

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>

edited Jun 5, 2015 at 4:19

answered Jun 5, 2015 at 4:00

Kishan

1,21014 silver badges26 bronze badges

1 Comment

user2684182 Over a year ago

You should give an explanation as to what you changed.

Collectives™ on Stack Overflow

Changing images using on click with arrays in javascript

2 Answers 2

What's wrong?

To try and debug yourself

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

What's wrong?

To try and debug yourself

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related