函数能正常执行并返回数组，但无法在页面中显示，根本原因在于 return 仅向调用者传递值，不会自动更新 dom；需显式将返回结果渲染到 html 元素中。
要实现“点击按钮加载下一页数据并显示”，关键在于：函数必须返回数据，同时在调用后立即将其插入页面。你当前的 nextTwo() 确实正确返回了切片后的数组（如 [11, 12, ..., 20]），但 onclick="nextTwo()" 仅执行函数，却丢弃了返回值——它既未被接收，也未被用于更新界面。
✅ 正确做法：接收返回值 + 渲染到 DOM
首先，确保目标容器存在（例如一个 <ul id="item_list">）：
<ul id="item_list"></ul> <button id="next" onclick="nextTwo()">显示下10项</button>
然后修改函数，在返回数据的同时，也完成 DOM 更新（推荐方式）：
const objList = [
{ id: 1, name: "Item 1" }, { id: 2, name: "Item 2" },
// ... 共20个对象（示例略）
{ id: 20, name: "Item 20" }
];
function nextTwo() {
const page = 2; // 固定为第2页 → 显示第11–20项
const step = 10;
const start = (page - 1) * step; // 更直观：第1页从0开始，第2页从10开始
const end = start + step;
const nextItems = objList.slice(start, end);
// ✅ 步骤1：更新页面（关键！）
const container = document.getElementById('item_list');
if (container) {
container.innerHTML = nextItems
.map(item => `<li>${item.name} (ID: ${item.id})</li>`)
.join('');
}
// ✅ 步骤2：仍可返回（便于测试或链式调用）
return nextItems;
}? 提示：原逻辑 start = page * step - step 等价于 (page - 1) * step，后者语义更清晰，也避免 page = 0 时出错。
⚠️ 常见错误排查
- 拼写错误：document.getElementbyId ❌ → 正确是 document.getElementById（大小写敏感）；
- 元素不存在：确保 HTML 中 id="item_list" 的元素已加载（脚本放在 </body> 前，或使用 DOMContentLoaded）；
- 未处理空结果：若 start >= objList.length，slice() 返回空数组，应添加提示；
- 硬编码页码：如需真正分页（支持多轮点击），应将 page 改为全局/闭包变量，而非固定写死。
✅ 进阶建议：解耦逻辑，提升可维护性
let currentPage = 1; // 初始为第1页（显示前10项）
const STEP = 10;
function renderPage(pageNum) {
const start = (pageNum - 1) * STEP;
const items = objList.slice(start, start + STEP);
document.getElementById('item_list').innerHTML =
items.length
? items.map(i => `<li>${i.name}</li>`).join('')
: '<li>没有更多内容了</li>';
return items;
}
function nextTwo() {
currentPage = Math.min(currentPage + 1, Math.ceil(objList.length / STEP));
return renderPage(currentPage);
}这样，函数既可返回数据供其他逻辑使用，又能实时更新视图——return 不是目的，而是桥梁；真正的终点，是让用户看见结果。
立即学习“Java免费学习笔记（深入）”；
