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>