CODEWITHSUNDEEP
javascriptjqueryhtml
joy_jlee
joy_jlee

Reputation: 113

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

Upvotes: 0

Views: 8322

Answers (3)

Anonymous
Anonymous

Reputation: 1

var start_pos = 0;

var img_count = document.getElementsByClassName('icons').length - 1;

var changeImg = function(direction){

pos = start_pos = (direction == "next")? (start_pos == img_count)? 0 : start_pos+1 : (start_pos == 0)? img_count : start_pos-1;

console.log(pos)

}


document.getElementById('left').onclick = function(){ changeImg("previous"); }
document.getElementById('right').onclick = function(){ changeImg("next"); }

Upvotes: 0

dodov
dodov

Reputation: 5844

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>

Upvotes: 4

yuc
yuc

Reputation: 508

Why sending string into arr.next('mainImg') function ? your img element always have the same id, only change src. and document.getElementById(element) is also the same img element.

html: <img id='mainImg' src="cake.png">

js: document.getElementById('mainImg')

consider img element as a container, and id is it's identifiler.

Upvotes: 0

Related Questions