为何函数在控制台正常运行但无法返回，点击按钮无法加载下10个数组对象

核心问题分析 #

1. 你的nextTwo函数仅完成数组切片并返回，没有执行任何DOM更新逻辑，所以页面不会产生变化
2. 直接给innerHTML赋值对象数组，JS会把数组转为默认字符串（比如[object Object, object Object]），无法渲染出预期内容
3. page变量写死为2，无法支持后续分页扩展（如果数组长度超过20的话）

修正后的完整代码 #

HTML部分

<div id="x_list"></div>
<button id="next" onclick="nextTwo()">显示下10个</button>

JS部分

// 模拟你的objList数组，替换成实际业务数据即可
const objList = Array.from({length:20}, (_,i) => ({id:i+1, content:`内容${i+1}`}));
// 跟踪当前页码，初始为1（已显示第一页）
let currentPage = 1;
const step = 10;

// 页面加载时自动渲染第一页
renderPage(currentPage);

function nextTwo() {
    currentPage++;
    // 边界判断：超出数组长度时禁用按钮并提示
    if(currentPage * step > objList.length) {
        document.getElementById('next').disabled = true;
        alert('已无更多内容');
        return;
    }
    const start = (currentPage - 1) * step;
    const end = start + step;
    const nextObj = objList.slice(start, end);
    // 渲染到页面
    renderPage(currentPage, nextObj);
}

// 专门的渲染函数，负责把对象转成可渲染的HTML
function renderPage(page, data = objList.slice(0, step)) {
    const listEl = document.getElementById('x_list');
    // 把每个对象转成HTML结构，这里用div示例，可替换成你需要的标签
    const html = data.map(item => `<div class="list-item">ID: ${item.id}，内容：${item.content}</div>`).join('');
    listEl.innerHTML = html;
}

关键修正点 #

• 新增currentPage变量跟踪当前页码，避免写死分页值
• 拆分出renderPage函数，专门处理对象到HTML的转换和DOM更新
• 增加边界判断，防止超出数组范围导致空内容
• 页面加载时自动渲染第一页，保证初始状态正确

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