如何使用 JavaScript 创建上一个和下一个按钮并且在结束位置上不起作用？

任务是在 JavaScript 的帮助下创建在结束位置不起作用的上一个和下一个按钮。

这里我们将在 pre按钮处于开始位置时添加禁用属性，对我们来说是 1，当它不在开始（1）位置时删除禁用属性。

和next button 一样，当它在结束位置时添加 disabled属性，对我们来说是 5 ，当它不在结束位置时删除 disabled 属性。实现如下：

HTML

  

    
        .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;
        }
    

  

    
        
            1
        
  
        
            prev
        
  
        
            next
        
    
  
    
        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;
        }
    

  

输出：