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:

My Personal Notes

Related Articles

HTML