In this article, the task is to create the previous and next button that doesn’t work on the end positions with the help of JavaScript.
Approach:
- Here we are going to add a disabled attribute to the pre button when it is at the start position which is 1 for us and remove the disabled attribute when it is not at the start (1) position.
- And same for the next button, add a disabled attribute when it is at the end position which is 5 for us, and remove the disabled attribute when it is not at the end position.
Example: This example shows the use of the above-explained approach.
HTML
<!DOCTYPE html> <html lang="en"> <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> </body> </html> |
CSS
.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; } |
Javascript
<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> |
Output: Click here to check the live Output.
Create previous and next button and non-working on end position
