
函数能正常执行并返回数组,但无法在页面中显示,根本原因在于 return 仅向调用者传递值,不会自动更新 dom;需显式将返回结果渲染到 html 元素中。
要实现“点击按钮加载下一页数据并显示”,关键在于:函数必须返回数据,同时在调用后立即将其插入页面。你当前的 nextTwo() 确实正确返回了切片后的数组(如 [11, 12, ..., 20]),但 onclick="nextTwo()" 仅执行函数,却丢弃了返回值——它既未被接收,也未被用于更新界面。
✅ 正确做法:接收返回值 + 渲染到 DOM
首先,确保目标容器存在(例如一个
- ):
然后修改函数,在返回数据的同时,也完成 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 => `? 提示:原逻辑 start = page * step - step 等价于 (page - 1) * step,后者语义更清晰,也避免 page = 0 时出错。
⚠️ 常见错误排查
- 拼写错误:document.getElementbyId ❌ → 正确是 document.getElementById(大小写敏感);
- 元素不存在:确保 HTML 中 id="item_list" 的元素已加载(脚本放在










