connecting javascript code to html file/getting it to appear in html

I’m currently working on a project that involves an NBA api that utilizes promises and async functions. In this case, I’m not sure why my javascript function (updatetable) is not showing up in the section when called.

Here’s this section I have in HTML:

<div class="second-row-hidden">
            <h1>Predicted Roster </h1>
            <table>
                <thead>
                    <tr class="stat-names">
                        <th id="player">Player</th>
                        <th id="player-country">Country</th>
                        <th id="player-gp">GP</th>
                        <th id="player-mp">MP</th>
                        <th id="player-ppg">PPG</th>
                        <th id="player-rpg">RPG</th>
                        <th id="player-apg">APG</th>
                        <th id="player-bpm">BPM</th>
                    </tr>
                </thead>
                <tbody id="player-data">
                    </tr>
                        <td colspan="8">Loading...</td>
                    </tr>
                </tbody>
            </table>
        </div>
<script src="script.js"></script>

Here is the Javascript file:

async function filterByConditions() {
    const finalPlayers = [];
    const playerStats = await fetchPlayerStats();

    for (let i = 0; i < playerStats.length; i++) {
        const player = playerStats[i];
        if (player.Country === 'USA' && player.GP >= 60 && player.MIN >= 30) {
            finalPlayers.push(player);
        }
    }
    return finalPlayers.slice(0,12);
}

async function updateTable() {
    const finalPlayers = await filterByConditions();
    const tableBody = document.getElementById('player-data');
    tableBody.innerHTML = '';

    finalPlayers.forEach(player => {
        const row = document.createElement('tr');
        Object.keys(player).forEach(key => {
            const cell = document.createElement('td');
            cell.textContent = player[key];
            row.appendChild(cell);
        });
        tableBody.appendChild(row);
    });
}

updateTable();

There is more async functions that build upon each other prior to filterbyConditions(). At the end with filterbyConditions() it is supposed to return an array of dictionaries with the keys listed in the html section ex: {Player: Stephen Curry, Country: USA, GP: 65…etc…} that hopefully displays each element into the table cells in html. Any help is appreciated!

I tried implementing the script straight into the html file and leaving it in an external file. Nothing changed. I’ve tried almost everything to get the html connected to the javascript and I’m not sure what the issue is.