如何通过按钮实现数组元素导航并显示当前索引？

看起来你已经搭好了基础框架，核心逻辑其实就是边界控制和DOM更新这两块，我帮你把代码补全并解释清楚：

完整可运行代码 #

<!DOCTYPE html>
<html>
<body>
  <div id="currentIndex">current index shown here</div>
  <button onclick="next()">next item</button>
  <button onclick="prev()">previous item</button>

  <script>
    const items = [1, 2, 3];
    let currentItem = 0;
    // 获取显示索引的DOM元素
    const indexDisplay = document.getElementById('currentIndex');

    // 更新页面显示的函数
    function updateDisplay() {
      // 显示当前索引和对应元素，你可以根据需求调整显示内容
      indexDisplay.textContent = `当前索引: ${currentItem}，当前元素: ${items[currentItem]}`;
    }

    function next() {
      // 边界控制：不能超过数组最后一个元素的索引
      if (currentItem < items.length - 1) {
        currentItem++;
        updateDisplay();
      }
    }

    function prev() {
      // 边界控制：不能小于0
      if (currentItem > 0) {
        currentItem--;
        updateDisplay();
      }
    }

    // 页面加载时初始化显示
    updateDisplay();
  </script>
</body>
</html>

关键逻辑解释 #

• DOM元素绑定：给显示索引的<div>加了id="currentIndex"，这样JS能精准获取到它来更新内容；同时修正了按钮的onclick事件（把previous()改成prev()），和你的函数名保持一致，避免触发报错。
• 边界控制：在next()和prev()函数里加了判断，确保currentItem始终在数组的合法索引范围内（0 到 items.length - 1），不会出现数组越界的问题。
• 更新显示函数：updateDisplay()是核心，每次切换索引后都要调用它，把最新的索引和元素信息渲染到页面上。
• 初始化显示：页面加载完成后主动调用一次updateDisplay()，确保打开页面就能看到正确的初始状态。

可选：循环导航（超出边界后循环） #

如果需要实现「到最后一个元素后点next回到第一个，到第一个元素后点prev到最后一个」的循环效果，可以修改next()和prev()的逻辑：

function next() {
  currentItem = (currentItem + 1) % items.length;
  updateDisplay();
}

function prev() {
  // 加items.length是为了避免负数取模的问题
  currentItem = (currentItem - 1 + items.length) % items.length;
  updateDisplay();
}

内容的提问来源于stack exchange，提问作者lache