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

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: 
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Design a web page using HTML and CSS
How to set space between the flexbox ?
Create a Responsive Navbar using ReactJS
HTML Cheat Sheet - A Basic Guide to HTML
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property