函数能正常执行并返回数据，但无法在页面中显示，根本原因在于缺少 dom 更新逻辑——return 仅向调用者传递值，不会自动渲染到 html；需手动将返回结果插入目标元素。

你的 nextTwo() 函数逻辑本身是正确的：它能准确切片出第 2 页（索引 10–19）的 10 个对象，并通过 return 正常返回数组。问题不在于“无法返回”，而在于你没有使用这个返回值更新页面。

HTML 中的 onclick="nextTwo()" 会执行函数，但忽略其返回值。JavaScript 的 return 不会自动绑定到 DOM —— 它只是把结果交还给调用上下文（比如赋值给变量或传入另一个函数）。因此，你需要显式地：

1. 获取返回值；
2. 遍历/格式化数据（如转为 HTML 字符串）；
3. 写入目标容器（如 <div id="x_list">）。

✅ 正确做法示例（含健壮性优化）：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

<!-- 确保存在目标容器 -->
<div id="x_list"></div>
<button id="next" onclick="nextTwo()">2</button>

const objList = [
  { id: 1, name: "Item 1" }, { id: 2, name: "Item 2" },
  /* ... 共 20 个对象 */
  { id: 20, name: "Item 20" }
];

let currentPage = 2; // 可改为动态管理，支持多页切换
const step = 10;

function nextTwo() {
  const start = (currentPage - 1) * step; // 更直观：第1页 → [0,10)，第2页 → [10,20)
  const end = Math.min(start + step, objList.length); // 防止越界（如总数量非整除）

  const nextObj = objList.slice(start, end);

  // ✅ 关键：将数据渲染到页面
  const html = nextObj.map(item => 
    `<div class="item"><strong>${item.id}</strong>: ${item.name}</div>`
  ).join('');

  document.getElementById('x_list').innerHTML = html;

  // 可选：返回值仍可保留，便于测试或链式调用
  return nextObj;
}

⚠️ 注意事项：

• document.getElementbyId 拼写错误 → 应为 getElementById（大小写敏感）；
• 确保 <div id="x_list"> 在 JS 执行前已存在于 DOM 中（建议将脚本置于 </body> 前，或使用 DOMContentLoaded）；
• 当前 page = 2 是硬编码，实际应用中应维护状态（如 currentPage++），并禁用/启用按钮防止重复点击或越界；
• slice(start, end) 是安全的，即使 end > array.length 也不会报错，但显式用 Math.min() 更清晰。

总结：return 不等于“显示”，它是函数的输出接口；真正的 UI 更新必须由开发者主动完成——获取返回值、生成 HTML、注入 DOM。掌握这一分离原则，是前端交互开发的关键基础。