Next and Previous Buttons in Javascript with Demo

Next and Previous Buttons in Javascript with Demo

JavaScript 27-07-2021 Saheb Sutradhar

 

In this post we will learn how to use next and previous buttons in javascript with demo application , the below example there is  image container and next, previous button .

When you click the next button it will display the next image and when you click the previous button it will display the previous image.

In below example

  • We have stored the image URLs in images array .
  • Declared i variable with default value 0.
  • By using the querySelector we are accessing the img element.
  • when user clicks the next button the value of i increments by 1 and we are using the i as the index of images array to access the image element
  • In same way when user clicks the previous button the value of i decrements by 1 and we are using the i as the index of images array to access the image element

Next and Previous Buttons in Javascript with Demo

 

Copy the below code and save it in a file with .html extension and try by yourself 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeLearningPoint</title>

    <!-- Basic style -->
    <style>
        .img-container {
            margin: 20px auto;
            width: 40%;
        }

        .btn-container {
            text-align: center;
        }

        img {
            height: 400px;
            display: block;
            margin: auto;
            padding-bottom: 20px;
        }

        button {
            outline: none;
            padding: 12px;
            border: none;
            background-color: rgb(25, 121, 211);
            border-radius: 8px;
            color: white;
            cursor: pointer;
        }
    </style>


</head>

<body>
    <!-- HTML code for next and previous button -->
    <div class="img-container">
        <img src="https://codelearningpoint.com/uploads/1627415311.jpg" alt="" class="imageTag">
        <div class="btn-container">
            <button onclick="previous()">Previous</button>
            <button onclick="next()">Next</button>
        </div>
    </div>

    <!-- Javascript code for next and previous button -->
    <script>
        let images = [
            'https://codelearningpoint.com/uploads/1627415311.jpg',
            'https://codelearningpoint.com/uploads/1627415323.jpg',
            'https://codelearningpoint.com/uploads/1627415302.jpg'
        ];
        let imageTag = document.querySelector('.imageTag');
        let i = 0;


        function next() {
            if (i >= images.length - 1) {
                return false;
            }
            i++;
            imageTag.setAttribute('src', images[i]);
        }
        function previous() {
            if (i <= 0) {
                return false;
            }
            i--;
            imageTag.setAttribute('src', images[i]);
        }

    </script>

</body>

</html>

 

 

One more example how to use next and previous buttons in javascript with demo application , in the below app if you select next next item tab will be selected and when you click the previous previous tab will be selected.

in Below example 

resetClass class is used to remove the selected class from all the item if any item has the selected class. and that function is getting called when you click the previous and next button.
 

Next and Previous Buttons in Javascript with Demo

 

Copy the below code and save it in a file with .html extension and try by yourself 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeLearningPoint</title>

    <!-- Basic style -->
    <style>
        .item-container {
            margin: 20px auto;
            width: 50%;
        }

        .btn-container {
            text-align: center;
        }

        li {
            display: inline-block;
            padding: 20px;
        }

        .selected {
            background-color: rgb(25, 121, 211);
            color: ivory;
        }

        button {
            outline: none;
            padding: 12px;
            border: none;
            background-color: rgb(25, 121, 211);
            border-radius: 8px;
            color: white;
            cursor: pointer;
        }
    </style>


</head>

<body>
    <!-- HTML code for next and previous button -->
    <div class="item-container">

        <ul>
            <li>ITEM-1</li>
            <li>ITEM-2</li>
            <li>ITEM-3</li>
            <li>ITEM-4</li>
            <li>ITEM-5</li>
            <li>ITEM-6</li>
        </ul>

        <div class="btn-container">
            <button class="pre" onclick="previous()">Previous</button>
            <button class="next" onclick="next()">Next</button>
        </div>
    </div>

    <!-- Javascript code for next and previous button -->
    <script>

        let children = document.querySelector('ul').children;
        let i = 0;

        children[i].classList.add('selected');// Item default selection

        function resetClass() {
            for (let j = 0; j < children.length; j++) {
                children[j].classList.remove('selected');
            }
        }

        function next() {
            if (i >= children.length - 1) {
                return false;
            }
            resetClass();
            i++;
            children[i].classList.add('selected')
        }

        function previous() {
            if (i <= 0) {
                return false;
            }
            resetClass();
            i--;
            children[i].classList.add('selected')
        }

    </script>

</body>

</html>

 

 

I hope this article is helpful for you , i am very glad to help you thanks for reading

 

Related Posts

Card image cap

Math Floor Javascript Method

JavaScript 16-07-2021 Saheb Sutradhar

math.floor javascript method takes a number type value as parameter and returns the round off of that value. The return value will be the nearest downward integ ...

Card image cap

Spread Operator in JavaScript

JavaScript 20-07-2021 Saheb Sutradhar

In this post we will learn what is spread operator in Javascript? How we can use it ? and Where we should use? Spread Operator allows you to spread out the ele ...

Card image cap

Remove duplicates from array in javascript

JavaScript 24-07-2021 Saheb Sutradhar

In this post i will show you how to remove duplicates from array in javascript.We can use filter() method to remove duplicates from array , if the index of the ...

Card image cap

Image size validation in javascript example

JavaScript 28-07-2021 Saheb Sutradhar

In this article you will learn Image size validation in javascript with example , along with the size validation you will learn how to validate image mime type. ...

Card image cap

How to get multiple checkbox value in javascript

JavaScript 30-07-2021 Saheb Sutradhar

In this post you will learn how to get multiple checkbox value in javascript . In many application you will find this kind of feature where we allow user to sel ...

Card image cap

Multiple checkbox validation in javascript

JavaScript 02-08-2021 Saheb Sutradhar

In your application you can use single check box or you can use multiple checkbox . Below examples will help you to understand multiple checkbox validation in j ...