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>→</span> ${whiteNewRating}`;
blackP.innerHTML = `${whiteNewRating} <span>→</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.