API分页数据展示问题：按钮切换请求URL实现页面切换功能修复

问题分析 #

现有代码存在三个核心问题：

• 按钮逻辑完全颠倒：「Next」按钮请求第一页数据，「Previous」按钮请求第二页数据，不符合需求
• 点击按钮仅更新全局变量，但未触发页面重新渲染，导致数据切换后页面无变化
• 重复渲染时未清空原有内容，会导致图片叠加显示

修复后的代码 #

HTML（保持原结构无需修改）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="display.css">
</head>
<body>
<label style="position: absolute; top: 12px; left: 600px">
    <button id="btn0">Next</button>
    <button id="btn1">Previous</button>
</label>
<div id="0"></div>
<p id="6" class="p0" style="position: absolute; top: 12px; left: 150px"></p>

<div id="1"></div>
<p id="7" class="p1" style="position: absolute; top: 150px; left: 150px"></p>

<div id="2"></div>
<p id="8" class="p2" style="position: absolute; top: 280px; left: 150px"></p>

<div id="3"></div>
<p id="9" class="p3" style="position: absolute; top: 420px; left: 150px"></p>

<div id="4" ></div>
<p id="10" class="p4" style="position: absolute; top: 550px; left: 150px"></p>

<div id="5"></div>
<p id="11" class="p5" style="position: absolute; top: 690px; left: 150px"></p>
<div id="forP"></div>
<script src="fp.js"></script>
</body>
</html>

JavaScript（重构优化后）

// 通用数据请求函数，根据页码获取用户数据
async function fetchUsers(page) {
    const response = await fetch(`https://reqres.in/api/users?page=${page}`);
    const data = await response.json();
    return data.data;
}

// 页面渲染函数，负责清空旧内容并渲染新数据
function renderUsers(users) {
    for (let i = 0; i < users.length; i++) {
        const user = users[i];
        // 清空图片容器，避免重复渲染叠加
        const imgContainer = document.getElementById(i);
        imgContainer.innerHTML = '';
        
        const img = document.createElement("img");
        img.src = user.avatar;
        imgContainer.appendChild(img);

        // 更新用户信息文本
        const infoElement = document.getElementById(i + 6);
        infoElement.innerHTML = `id: ${user.id}. <br> firstName: ${user.first_name}. <br> email: ${user.email}.`;
    }
}

// 页面初始化时加载第一页数据
fetchUsers(1).then(renderUsers);

// 绑定按钮事件，修正分页逻辑
document.getElementById("btn0").addEventListener("click", () => {
    fetchUsers(2).then(renderUsers);
});

document.getElementById("btn1").addEventListener("click", () => {
    fetchUsers(1).then(renderUsers);
});

关键修复说明 #

• 拆分fetchUsers和renderUsers函数，职责单一，便于维护复用
• 修正按钮逻辑：「Next」请求第二页数据，「Previous」请求第一页数据
• 渲染前清空图片容器，解决重复渲染导致的图片叠加问题
• 移除不必要的全局变量，避免变量污染
• 按钮点击后重新调用渲染函数，确保页面数据与请求结果同步更新

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