Updated innerHTML quickly disappearing after code runs

25 views Asked by At

I have logic from a JS file for an html page that allows users to add a chess game and also see past games. I'm using a Fast API app to interface with a database holding game data. I want to display updated member ratings when a new game is added by updating innerHTML on two p tags, but the update only appears for a second before disappearing. I have a preventDefault statement and a window.onload statement, so I don't know if those are causing the problem.

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.

I've tried making the desired update happen in the window.onload function, but I feel like I should be able to do it the other way. I don't know if it's because within the addGame function I'm calling a new function called postGame, or if it has to do with API calls or how I'm using the form.

0

There are 0 answers