Javascript Next and Previous images

Code is supposed to show next image when clicking on next arrow and previous image when clicked on previous arrow. It does not work though. (error occurs while assigning img.src=imgs[this.i]; it says Cannot set property 'src' of null at collection.next) .

Javascript code :

var arr = new collection(['cake.png', 'image2.png', 'image3.png', 'image1.png']);

function collection(imgs) {
  this.imgs = imgs;
  this.i = 0;
  this.next = function(element) {
    var img = document.getElementById('element')
    this.i++;
    if (this.i == imgs.length) {
      this.i = 0;
    }
    img.src = imgs[this.i].src;


  }
  this.prev = function(element) {
    var img = document.getElementById('element');
    this.i--;
    if (this.i < 0) {
      this.i = imgs.length - 1;
    }
    img.src = imgs[this.i].src;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>photos</title>
  <script src="photos.js"></script>
</head>

<body>

  <input type='button' value='<' name='next' onclick="arr.next('mainImg')" />
  <img id='mainImg' src="cake.png">
  <input type='button' value='>' name='prev' onclick="arr.prev('mainImg')" />


</body>

</html>

Not using jquery. I do not have enough experience in js either. Thank you for your time

Answers 1

  • You had three mistakes:

    1. You referenced the images as img.src = imgs[this.i].src; and you just had an array of strings, not an array of objects with a src property. img.src = imgs[this.i]; is the correct way to get the URL.
    2. You used

      var img = document.getElementById('element');
      

      when you should have used

      var img = document.getElementById(element);
      

      element is an argument coming from your onclick event. It holds the id of your image that you should be using. "element" is just a string. You try to find an element with id equal to element which doesn't exist.

    3. Edit: You should also use &lt; and &gt; to represent < and >. Otherwise your HTML might get screwed up. More on that here.

    var arr = new collection(['http://images.math.cnrs.fr/IMG/png/section8-image.png', 'https://www.w3.org/MarkUp/Test/xhtml-print/20050519/tests/jpeg444.jpg', "http://saturnraw.jpl.nasa.gov/multimedia/images/raw/casJPGFullS72/N00183828.jpg"]);
    
    function collection(imgs) {
      this.imgs = imgs;
      this.i = 0;
    
      this.next = function(element) {
        var img = document.getElementById(element);
        
        this.i++;
        if (this.i >= imgs.length) {
          this.i = 0;
        }
    
        img.src = imgs[this.i];
      };
     
      this.prev = function(element) {
        var img = document.getElementById(element);
      
        this.i--;
        if (this.i < 0) {
          this.i = imgs.length - 1;
        }
      
        img.src = imgs[this.i];
      };
      
      this.next("mainImg"); // to initialize with some image
    }
    <!DOCTYPE html>
    <html>
    
    <head>
      <title>photos</title>
      <script src="photos.js"></script>
    </head>
    
    <body>
    
      <input type='button' value='<' name='next' onclick="arr.next('mainImg')" />
      <img id='mainImg' src="cake.png">
      <input type='button' value='>' name='prev' onclick="arr.prev('mainImg')" />
    
    
    </body>
    
    </html>

    This is how I'd personally do it:

    var myCollection = new Collection([
      "http://images.math.cnrs.fr/IMG/png/section8-image.png",
      "https://www.w3.org/MarkUp/Test/xhtml-print/20050519/tests/jpeg444.jpg",
      "http://saturnraw.jpl.nasa.gov/multimedia/images/raw/casJPGFullS72/N00183828.jpg"
    ], "mainImg");
    
    document.getElementById("next_btn").onclick = function() {
      myCollection.next();
    };
    
    document.getElementById("prev_btn").onclick = function() {
      myCollection.prev();
    }
    
    function Collection(urls, imgID) {
      var imgElem = document.getElementById(imgID);
      var index = 0;
    
      this.selectImage = function() {
        imgElem.src = urls[index];
      };
    
      this.next = function() {
        if (++index >= urls.length) {
          index = 0;
        }
    
        this.selectImage();
      };
    
      this.prev = function(element) {
        if (--index < 0) {
          index = urls.length - 1;
        }
    
        this.selectImage();
      };
    
      // initialize
      this.selectImage();
    }
    <!DOCTYPE html>
    <html>
    
    <head>
      <title>photos</title>
      <script src="photos.js"></script>
    </head>
    
    <body>
      <input id="next_btn" type='button' value='&lt;' />
      <img id='mainImg'>
      <input id="prev_btn" type='button' value='&gt;' />
    </body>
    
    </html>


Related Articles