如何在JavaScript中判断是否处于最后一页并控制Next按钮状态

要判断当前是否处于最后一页，核心是先算出总页数，再对比当前页码索引：

1. 计算总页数 #

因为每页显示固定数量的条目，总页数需要用Math.ceil()向上取整（比如5条数据、每页3条，总页数是2而不是1.666）：

const totalPages = Math.ceil(items.length / itemsPerPage);

2. 判断最后一页的条件 #

你的pageIndex是从0开始计数的，所以最后一页的索引是总页数 - 1，判断条件就是：

pageIndex === totalPages - 1

3. 修改代码实现Next按钮变色 #

把这个判断逻辑加到plusPage()函数里，同时要注意：切换回非最后一页时，要恢复按钮的默认样式，避免样式残留：

function plusPage() {
  const button = document.createElement('button');
  button.classList.add('btn');
  button.innerHTML = "Next";
  button.addEventListener('click', () => {
    pageIndex = pageIndex + 1;
    loadItems();
  });

  // 判断是否处于最后一页
  const totalPages = Math.ceil(items.length / itemsPerPage);
  if (pageIndex === totalPages - 1) {
    button.style.backgroundColor = "#999999"; // 替换成你需要的禁用颜色
    button.disabled = true; // 可选：直接禁用按钮点击事件
  } else {
    // 非最后一页时恢复默认样式
    button.style.backgroundColor = "";
    button.disabled = false;
  }

  nav.append(button);
}

顺便修正原代码的小问题 #

你的代码里有两个影响功能的小错误，不修正的话列表内容无法正常显示：

• 数组对象格式错误：{"name: item2"}应该写成{"name": "item2"}（引号位置错误）
• 模板字符串变量错误：$item[i].name应该写成${items[i].name}（缺少大括号，变量名应为items）

修正后的items数组：

const items = [
    {name: "item1"},
    {"name": "item2"},
    {"name": "item3"},
    {"name": "item4"},
    {"name": "item5"},
]

修正后的loadItems里的模板字符串：

item.innerHTML = `
    <p>${items[i].name}</p>
`;

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