How to create previous and next button and non-working on end position using JavaScript ?

Difficulty Level : Basic
Last Updated : 18 Nov, 2020

The task is to create previous and next button that doesn’t work on the end positions with the help of JavaScript.

Here we are going to add disabled attribute to the pre button when it is at the start position which is 1 for us and remove disabled attribute when it is not at start (1) position.

And same for next button, add disabled attribute when it is at the end position which is 5 for us and remove disabled attribute when it is not at end position. Implementation of this is below :

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        .container {
            margin: 100px 400px;
        }
  
        .no-box {
            padding-left: 30px;
            font-size: 60px;
        }
  
        .btn {
            background-color: rgb(179, 179, 179);
        }
  
        .btn:hover {
            color: white;
            background-color: green;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <div class="no-box">
            <span class="no">1</span>
        </div>
  
        <button class="btn" onclick="prev()">
            prev
        </button>
  
        <button class="btn" onclick="next()">
            next
        </button>
    </div>
  
    <script>
        var no_box = document
            .querySelector('.no-box');
              
        var i = 1;
  
        function prev() {
  
            // Start position 
            if (i == 1) {
  
                // Add disabled attribute on
                // prev button
                document.getElementsByClassName(
                        'prev').disabled = true;
  
                // Remove disabled attribute 
                // from next button 
                document.getElementsByClassName(
                        'next').disabled = false;
            } else {
                i--;
                return setNo();
            }
        }
  
        function next() {
  
            // End position
            if (i == 5) {
  
                // Add disabled attribute on 
                // next button
                document.getElementsByClassName(
                        'next').disabled = true;
  
                // Remove disabled attribute
                // from prev button
                document.getElementsByClassName(
                        'prev').disabled = false;
            } else {
                i++;
                return setNo();
            }
        }
  
        function setNo() {
  
            // Change innerhtml
            return no_box.innerHTML = i;
        }
    </script>
</body>
  
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.

My Personal Notes

Related Articles

How to create previous and next button and non-working on end position using JavaScript ?

HTML