代码执行后更新的innerHTML快速消失问题排查

我为HTML页面编写了JS逻辑，支持添加国际象棋游戏、查看过往记录，通过FastAPI对接数据库存储游戏数据。添加新游戏时，希望通过更新两个<p>标签的innerHTML展示成员更新后的评级，但内容仅显示一秒就消失。已添加preventDefault和window.onload语句，不确定是否是这两者导致问题，也怀疑是addGame调用postGame的方式、API调用或表单使用的问题。曾尝试在window.onload中执行更新，但认为应有其他实现方式。

原代码（存在语法错误）：

const form = document.getElementById("game-form");
form.addEventListener('submit', addGame);

function addGame(e) {
    e.preventDefault();

    // Fetch user ratings from API.
    fetch(`http://localhost:8000/members/${whiteId.value}`)window.onload = (event) => {
    let table = document.getElementById('games-table');
        .then(response => response.json())
        .then(data => {
            whiteOldRating = data.rating;

            fetch(`http://localhost:8000/members/${blackId.value}`)
            .then(response => response.json())
            .then(data => {
                blackOldRating = data.rating;

                // Calls function to post new game once API calls have succeeded.
                postGame(whiteOldRating, blackOldRating);

function postGame(wRating, bRating) {
    const result = document.querySelector('input[name="result"]:checked');

    ... [API stuff happening here to update db]

    whiteP = document.getElementById('whiteRatingChange');
    blackP = document.getElementById('blackRatingChange');

    whiteP.innerHTML = `${whiteOldRating} <span>&#8594;</span> ${whiteNewRating}`;
    blackP.innerHTML = `${whiteNewRating} <span>&#8594;</span> ${blackNewRating}`;

window.onload = (event) => {
    let table = document.getElementById('games-table');

    ...
    //API calls to populate a table of past games.

1. 修复致命语法错误 #

原代码中fetch语句后错误拼接了window.onload，直接破坏了代码结构，导致逻辑混乱。必须拆分两者，将初始化逻辑统一放在一个window.onload中：

window.onload = (event) => {
    // 绑定表单提交事件
    const form = document.getElementById("game-form");
    form.addEventListener('submit', addGame);

    // 加载过往游戏表格
    const table = document.getElementById('games-table');
    // 此处写获取过往游戏的API调用逻辑
};

function addGame(e) {
    e.preventDefault();

    // 获取白方评级
    fetch(`http://localhost:8000/members/${whiteId.value}`)
        .then(response => response.json())
        .then(data => {
            const whiteOldRating = data.rating;
            // 获取黑方评级
            fetch(`http://localhost:8000/members/${blackId.value}`)
                .then(response => response.json())
                .then(data => {
                    const blackOldRating = data.rating;
                    postGame(whiteOldRating, blackOldRating);
                })
                .catch(err => console.error('获取黑方信息失败:', err));
        })
        .catch(err => console.error('获取白方信息失败:', err));
}

2. 确保表单默认行为被彻底阻止 #

虽然addGame中调用了e.preventDefault()，但需确认：

• 表单事件绑定是在DOM加载完成后执行的（已放在window.onload中）
• 后续代码没有手动触发form.submit()或页面跳转逻辑

3. 避免全局变量污染 #

所有变量需用let/const声明，避免意外覆盖：

function postGame(wRating, bRating) {
    const result = document.querySelector('input[name="result"]:checked');
    // ... API更新数据库的逻辑 ...

    const whiteP = document.getElementById('whiteRatingChange');
    const blackP = document.getElementById('blackRatingChange');
    // 使用传入的参数wRating/bRating，而非全局变量
    whiteP.innerHTML = `${wRating} <span>&#8594;</span> ${whiteNewRating}`;
    blackP.innerHTML = `${bRating} <span>&#8594;</span> ${blackNewRating}`;
}

4. 优化API调用可读性（可选） #

用async/await替代嵌套then，降低代码复杂度：

async function addGame(e) {
    e.preventDefault();
    try {
        const whiteRes = await fetch(`http://localhost:8000/members/${whiteId.value}`);
        const whiteData = await whiteRes.json();
        const whiteOldRating = whiteData.rating;

        const blackRes = await fetch(`http://localhost:8000/members/${blackId.value}`);
        const blackData = await blackRes.json();
        const blackOldRating = blackData.rating;

        await postGame(whiteOldRating, blackOldRating);
    } catch (err) {
        console.error('添加游戏失败:', err);
        // 可在此处添加用户提示
    }
}

async function postGame(wRating, bRating) {
    const result = document.querySelector('input[name="result"]:checked');
    // 构造POST请求体
    const res = await fetch('http://localhost:8000/games', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            white_id: whiteId.value,
            black_id: blackId.value,
            result: result.value
        })
    });
    const data = await res.json();
    // 从API返回值中获取新评级
    const whiteNewRating = data.white_new_rating;
    const blackNewRating = data.black_new_rating;

    const whiteP = document.getElementById('whiteRatingChange');
    const blackP = document.getElementById('blackRatingChange');
    whiteP.innerHTML = `${wRating} <span>&#8594;</span> ${whiteNewRating}`;
    blackP.innerHTML = `${bRating} <span>&#8594;</span> ${blackNewRating}`;
}

5. 增加错误捕获 #

在每个fetch后添加catch，排查API请求失败的情况，避免代码中断。

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