How to create previous and next button and non-working on end position using JavaScript ?
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:
.png)
