By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,956 Members | 1,722 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,956 IT Pros & Developers. It's quick & easy.

How to make Next Button work and go to another image using JavaScript

P: 1
I am having trouble making my next button work. On clicking the next button , I need the images to change to the next one. There are three images. I am not sure if I have my javascript code in the wrong place or the location of the images do not work. here is my code below:


Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Lab 5, Part 2</title>
  5. <meta charset = "utf-8" />
  6. <script type = "text/javascript">
  7. var curPic = 0;
  8. var cPic = [
  9.     'http://weblab.kennesaw.edu/seeds/lettuce.gif',
  10.     'http://weblab.kennesaw.edu/seeds/tomato.gif',
  11.     'http://weblab.kennesaw.edu/seeds/carrot.gif'
  12. ];
  13.  
  14. function vegeTables(direction) {
  15.     if (direction == 'next') {
  16.         curPic++;
  17.  
  18.         if (curPic == 3) {
  19.             curPic = 0;
  20.         }
  21.     } else {
  22.         curPic--;
  23.     }
  24.  
  25.     document.images[0].src = cPic[curPic];
  26. }
  27. </script>
  28.  
  29. <style type = "text/css" >
  30.   .vegetable1  {position: absolute; top: 120px; left: 39%;
  31.                z-index: 0;}
  32.   .vegetable2  {position: absolute; top: 120px; left: 39%;
  33.                z-index: 0;}
  34.   .vegetable3  {position: absolute; top: 120px; left: 39%;
  35.                z-index: 0;}
  36.   div.bottom    { height:20px;
  37.     width:100%;
  38.     margin: auto;
  39.     position: absolute;
  40.     top: 550px;
  41.     left: 47%;}
  42.   #veggie1 , #veggie2 , #veggie3 {display: inline-block;}
  43. </style>
  44. </head>
  45. <body>
  46.   <p>
  47.    <img class = "vegetable1"  id = "veggie1"
  48.         src = "/seeds/lettuce.gif"
  49.         alt = "picture of vegetable1" />
  50.    <img class = "vegetable2"  id = "veggie2"
  51.         src = "/seeds/tomato.gif"
  52.         alt = "picture of vegetable2" />
  53.    <img class = "vegetable3"  id = "veggie3"
  54.         src = "/seeds/carrot.gif"
  55.         alt = "picture of vegetable3" />
  56. </p>
  57.  
  58.  <div class = "bottom">
  59.   <input id = "clickme" type = "button" value = "Next"  onclick = "vegeTables('next');" />
  60. </div>
  61.  
  62. </body>
  63. </html>
Mar 18 '16 #1
Share this Question
Share on Google+
2 Replies


gits
Expert Mod 5K+
P: 5,268
basically it is working - but you should have a look at the 3 img tags in your document's body. remove the 2nd and 3rd and then you see the img that you change. you set the src of that one img only - so the other 2 simply do overlay that.
Mar 24 '16 #2

P: 17
Alternative to your code to allow movement forward/backward. (Uncomment for Prev button)
Logic for curPic changed a bit for more pictures (if desired).


Expand|Select|Wrap|Line Numbers
  1.     <!DOCTYPE html>
  2.     <html>
  3.     <head>
  4.     <title>Lab 5, Part 2</title>
  5.     <meta charset = "utf-8" />
  6.  
  7.     <script type = "text/javascript">
  8.     var curPic = 0;
  9.     var cPic = [
  10.         'http://weblab.kennesaw.edu/seeds/lettuce.gif',
  11.         'http://weblab.kennesaw.edu/seeds/tomato.gif',
  12.         'http://weblab.kennesaw.edu/seeds/carrot.gif'
  13.     ];
  14.     function vegeTables(direction) {
  15.         if (direction == 'next') { curPic++; } else { curPic--; }
  16.         if (curPic < 0) { curPic = 2; }
  17.         if (curPic > cPic.length-1) { curPic = 0; }
  18.         document.images[0].src = cPic[curPic];
  19.     }
  20.     </script>
  21.  
  22.     <style type = "text/css" >
  23.       .vegetable1  { position: absolute; top: 120px; left: 39%; z-index: 0;}
  24.       div.bottom    { height:20px; width:100%;  margin: auto; 
  25.                       position: absolute; top: 550px; left: 47%;} 
  26. /*      #veggie1 , #veggie2 , #veggie3 { display: inline-block;} */
  27.     </style>
  28.     </head>
  29.     <body>
  30.      <p>
  31.       <img class = "vegetable1"  id = "veggie1" src = "http://weblab.kennesaw.edu/seeds/lettuce.gif" />
  32.      </p>
  33.      <div class = "bottom">
  34.       <input id = "clickmeN" type = "button" value = "Next"  onclick = "vegeTables('next');" />
  35. <!--      <input id = "clickmeP" type = "button" value = "Prev"  onclick = "vegeTables('prev');" /> -->
  36.      </div>
  37.     </body>
  38.     </html>
Apr 4 '16 #3

Post your reply

Sign in to post your reply or Sign up for a free account.