CODEWITHSUNDEEP
javascripthtmlbutton
R.E.
R.E.

Reputation: 11

Back/Forward button between 3 images

I am trying to make a function that can go forward and backwards between 3 images, depending on which button is pressed. So for now I have made a function for forward and backwards button:

Updated code:

var img1 = "images2/page1.jpg";
var img2 = "images2/page2.jpg";
var img3 = "images2/page3.jpg";

function back() {
  var page = document.getElementById("page_1");
  if (page.src == img3) {
    page.src = img2;
  } else if (page.src == img2) {
    page.src = img1;
  } return page.src;
}

function forward() {
  var page = document.getElementById("page_1");

  if (page.src == img1) {
    page.src = img2;
  } else if (page.src == img2) {
    page.src = img3;
  } return page;
}

But when I run it in my HTML document, the buttons do nothing.

HTML:

<script src="indiv.js"></script>
    <img id="page_1" src="images2/page1.jpg" height="400"><br />
        <button type="button" onclick="back()">Last page</button>
        <button type="button" onclick="forward()">Next page</button>

What am I missing?

Thank you from the newbie.

Upvotes: 1

Views: 598

Answers (2)

Anwesh Mohapatra
Anwesh Mohapatra

Reputation: 127

The cleanest way to do this is to maintain an array of images you want to cycle through. Then have a index variable to keep track of which image to show currently. Forward and backward buttons just increase or decrease the index variable by one.

<div>
    <img id="page_1" src="" height="400">
    <button type="button" onclick="back()">Last page</button>
    <button type="button" onclick="forward()">Next page</button>
</div>
<script>
    //array of images
    let map = ["https://www.hindustantimes.com/rf/image_size_444x250/HT/p2/2020/05/21/Pictures/_037138a2-9b47-11ea-a010-c71373fc244b.jpg",
        "https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
        "https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg"
    ]

    //index variable initially set to first image
    let index = 0;
    document.getElementById("page_1").src = map[index];

    //forward button logic
    function forward() {
        index = (index + 1) % 3;
        document.getElementById("page_1").src = map[index];
    }

    //backward button logic
    function back() {
        index = (index - 1 < 0) ? 2 : index - 1;
        document.getElementById("page_1").src = map[index];
    }
</script>

Codepen

Upvotes: 0

Beena Shetty
Beena Shetty

Reputation: 3736

Check this code:

var img1 = "https://www.illumina.com/content/dam/illumina-marketing/images/company/featured-articles/bottlenose_dolphin.png"
  var img2 = "https://i.pinimg.com/564x/65/d6/cf/65d6cfcb2bb5193d6d160157b34b2bd0.jpg"
  var img3 = "https://i.pinimg.com/originals/d6/98/88/d698888c81f296032bd595f758b76dc5.jpg"

function back() {
  var page = document.getElementById("page_1");
  
  if (page.src == img3) {
    page.src = img2;
  } else if (page.src == img2) {
    page.src = img1;
  } else if (page.src == img1) {
    page.src = img3;
  }
}

function forward() {
  var page = document.getElementById("page_1");
  
  if (page.src == img1) {
    page.src = img2;
  }else if (page.src == img2) {
    page.src = img3;
  }else if (page.src == img3) {
    page.src = img1;
  }
}
<img id = "page_1" src = "https://www.illumina.com/content/dam/illumina-marketing/images/company/featured-articles/bottlenose_dolphin.png" height = "200"><br>
<button type="button" onclick="back()">Last Page</button>
<button type="button" onclick="forward()">Next page</button>

Upvotes: 2

Related Questions