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

javascript next and previous buttons not working

P: 1
I am having trouble executing the next and previous buttons on my page. The functions for nextBottonClick and previousButtonClick specifically. Any help is greatly appreciated.

Thansk


Expand|Select|Wrap|Line Numbers
  1. // Variable declarations.
  2. var imageCache = [];  // Array to hold the images from the invisible UL list.
  3. var imageItem = 0;    // Holds the currently displayed image index.
  4. var images = 0;       // Total images we have on the page to display.
  5. // Elements from the page we need to refer to.
  6. var captionNode;
  7. var imageNode;
  8.  
  9. // Here is the $ function to simplify use of document.getElementById().
  10. var $ = function (id) { 
  11.     return document.getElementById(id); 
  12. }
  13.  
  14. // Executed upon window load event.
  15. window.onload = function () {
  16.     // Setting up various elements into variables to use later.
  17.     var listNode = $("image_list");  
  18.     var nextButton = $("next");
  19.     var previousButton = $("previous");
  20.     // Filling in the caption and image node variables.  
  21.     captionNode = $("caption");
  22.     imageNode = $("image");
  23.  
  24.     // The images are placed within <a> tags for convenience.  They aren't used as links ever.
  25.     var links = listNode.getElementsByTagName("a");
  26.  
  27.     // Process image links.  A for loop is used to touch each of the images within the <a> tags
  28.     // and store the image information into an array element.
  29.     var i, linkNode, image;
  30.     for ( i = 0; i < links.length; i++ ) {
  31.         linkNode = links[i];
  32.         // Pre-load image and copy title properties.
  33.         image = new Image();
  34.         image.src = linkNode.getAttribute("href");
  35.         image.title = linkNode.getAttribute("title");
  36.         imageCache.push(image);
  37.     }
  38.     // Now record the total images we have.
  39.     images = imageCache.length;
  40.  
  41.     // Set up the button handlers.
  42.     nextButton.onclick = nextButtonClick;
  43.     previousButton.onclick = previousButtonClick;
  44. }
  45.  
  46. function nextButtonClick() {
  47.     //TODO: Complete the next button click event handler to display the next image.
  48.     if(imageNode < images){
  49.         imageNode++
  50.     }
  51.     else{
  52.         imageNode = 1
  53.     }
  54.     document.slideImage.src = image[imageNode-1]
  55.     //      Roll the image over when we reach the end of the image set.
  56.  
  57.     // Increase image item index by 1;
  58.  
  59.     // Check to see if we are at the end of the image list.
  60.     // Remember, arrays are indexed starting a zero so if we have a number that is equal
  61.     // to the number of images, we have reached that point.
  62.     // If so, go back to the first image.
  63.  
  64.  
  65.     // Now set the image src and title properties to the appropriate image.
  66.     // To retrieve an image from imageCache with index imageItem, use imageCache[imageItem].
  67. }
  68.  
  69. function previousButtonClick() {
  70.     // Decrease image counter by 1.
  71.         if(imageNode > 1){
  72.         imageNode--
  73.     }
  74.     else{
  75.         imageNode = images
  76.     }
  77.     document.slideImage.src = image[imageNode-1]
  78.  
  79.  
  80.     // Check to see if we are less than zero.
  81.     // If so, go to the last image.  Keep in mind that the index of the last
  82.     // image is one less than the number of images.
  83.  
  84.     // Now set the image src and title properties to the appropriate image.
  85.  
  86. }
  87.  
Oct 19 '13 #1
Share this question for a faster answer!
Share on Google+

Post your reply

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