为JSON数组开发上/下一页按钮失败，寻求技术解决方案

我来帮你搞定这个分页按钮的问题！你当前的代码里有几个关键问题导致按钮无法正常工作：比如变量i未初始化、没有跟踪当前显示的内容索引，也没给按钮绑定点击事件来触发内容切换。

下面是修复后的完整代码，我会一步步解释关键改动：

<div id="text"></div> 
<button name="prev">go to previous div</button> 
<button name="next">go to next div</button> 

<script>
// 定义你的JSON数组
const contentArr = [ 
  { "text": "text0" }, 
  { "text": "text1" }, 
  { "text": "text2" }, 
  { "text": "text3" } 
];

// 初始化当前显示的索引，默认从第一个元素开始
let currentIndex = 0;
// 获取显示内容的容器和按钮元素
const textContainer = document.getElementById('text');
const prevBtn = document.querySelector('button[name="prev"]');
const nextBtn = document.querySelector('button[name="next"]');

// 定义更新显示内容的函数
function updateContent() {
  // 根据当前索引获取对应的内容，渲染到容器里
  textContainer.innerHTML = `<p>${contentArr[currentIndex].text}</p><br>`;
}

// 给上一页按钮绑定点击事件
prevBtn.addEventListener('click', () => {
  // 边界判断：不能小于0，否则停在第一个元素
  if (currentIndex > 0) {
    currentIndex--;
    updateContent();
  }
});

// 给下一页按钮绑定点击事件
nextBtn.addEventListener('click', () => {
  // 边界判断：不能超过数组最后一个元素的索引
  if (currentIndex < contentArr.length - 1) {
    currentIndex++;
    updateContent();
  }
});

// 页面加载完成后，先显示第一个内容
updateContent();
</script>

关键改动说明： #

• 跟踪当前索引：用currentIndex变量记录当前显示的是数组中的第几个元素，初始值设为0（第一个元素）
• 提取更新函数：把渲染内容的逻辑封装成updateContent函数，避免重复代码
• 绑定按钮事件：给两个按钮分别添加点击事件，点击时修改currentIndex，同时做边界判断（防止索引越界），然后调用更新函数刷新内容
• 初始渲染：页面加载时主动调用updateContent，确保一开始就能看到第一个内容

这样修改后，你的上一页/下一页按钮就能正常切换JSON数组里的内容啦！

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