如何使用JavaScript创建上一个和下一个按钮，并在末尾位置上禁用它们

我们可以使用原生JavaScript创建上一个和下一个按钮，并在它们到达末尾位置时禁用它们。JavaScript是一种功能强大的浏览器级语言，我们可以轻松地控制和操作DOM元素。在这里，我们将创建2个按钮，并根据点击的按钮来更改一个HTML元素的内容。

示例1

在这个示例中，我们将创建一个“增加”按钮和一个“减少”按钮，当点击它们时，分别会将HTML元素的内容值增加和减少1。当按钮到达它们的极限位置时，增加按钮的极限位置为5，减少按钮的极限位置为0，我们也会禁用这些按钮。

<html lang="en">
<head>
   <title>How to create previous and next button and non-working on end position using JavaScript?</title>
</head>
<body>
   <h3>How to create previous and next button and non-working on end position using JavaScript?</h3>
   <p>3</p>
   <div>
      <button class="inc">Increment</button>
      <button class="dec">Decrement</button>
   </div>
   <script>
      const inc = document.getElementsByClassName('inc')[0]
      const dec = document.getElementsByClassName('dec')[0]
      const content = document.getElementsByTagName('p')[0]
      let i = 3;

      inc.addEventListener('click', () => {
         if (i === 5) return;
         i++;
         content.textContent = i;
      })
      dec.addEventListener('click', () => {
         if (i === 0) return;
         i--;
         content.textContent = i;
      })
   </script>
</body>
</html>

示例2

在这个示例中，让我们实现上述方法，但是不展示数字的增加和减少，而是展示一个“绝对”定位元素在左对齐上的增加和减少。

<html lang="en">
<head>
   <title>How to create previous and next button and non-working on end position using JavaScript?</title>
   <style>
      body {
         position: relative;
      }
      .dot {
         background-color: black;
         height: 5px;
         width: 5px;
         border-radius: 50%;
         position: absolute;
      }
      .inc, .dec {
         margin-top: 20px;
      }
   </style>
</head>
<body>
   <h3>How to create previous and next button and non-working on end position using JavaScript?</h3>
   <div class="dot"></div>
   <div>
      <button class="inc">Increment</button>
      <button class="dec">Decrement</button>
   </div>

   <script>
      const inc = document.getElementsByClassName('inc')[0]
      const dec = document.getElementsByClassName('dec')[0]
      const dot = document.getElementsByClassName('dot')[0]
      let i = 0;

      inc.addEventListener('click', () => {
         if (i === 10) return;
         i += 2;
         dot.style.left = ` ${i}%` }) dec.addEventListener('click', () => { if (i === 0) return; i -= 2; dot.style.left = `$ {i}%`
      })
   </script>
</body>
</html>