为什么我动态添加的 Javascript 元素在刷新我的网站后消失了？ [关闭]

Question

我目前正在为我的学校项目申请编写成绩显示页面。该代码应该动态地将

overallGWA

、

maxGWA

和拉丁荣誉标题添加到页面。它在第一次运行时有效，但在我刷新它后，元素只会出现大约一秒钟然后立即消失。

我应该从数据库中获取成绩值，但我现在在变量

overallGWA

和

maxGWA

中使用虚拟值，我的代码仍然无法正常工作。我已经阅读了有关本地或会话存储的信息，但我不认为这是解决我的问题的方法，因为我不处理输入值。但是，我仍然尝试在我的代码中实现它，但没有奏效。我不确定我是否正确实施了它。

这是我的代码（没有 CSS）：

<main>
    <div class="title">
        <h1>Grades</h1>
    </div>
    <div class="GWA">
        <div style="background-color: #e28f60; color: #ffffff">
            <p class="titleGWA">Overall GWA</p>
            <p class="numberGWA" id="overallGWA"></p>
        </div>
        <div style="background-color: #ffd9c3; color: #9b5f3d">
            <p class="titleGWA">Max. Attainable GWA</p>
            <p class="numberGWA" id="maxGWA"></p>
        </div>
    </div>
    <div class="academicStatus">
        <h3>Academic Status</h3>
        <p style="float: left;">On track for</p>
        <ul id="onTrackFor"></ul>
        <p>Can still attain</p>
    </div>

    <script>
        let overallGWA = 1.00; // change later on
        let maxGWA = 1.00; // change later on
        overallGWA = overallGWA.toFixed(2);
        maxGWA = maxGWA.toFixed(2);
        document.getElementById("overallGWA").innerHTML = overallGWA;
        document.getElementById("maxGWA").innerHTML = maxGWA;
        
        let onTrackFor = [];
        let canStillAttain = [];
        if (overallGWA < 1.25) {
            onTrackFor[onTrackFor.length] = "Summa Cum Laude";
            onTrackFor[onTrackFor.length] = "Magna Cum Laude";
            onTrackFor[onTrackFor.length] = "Cum Laude";
        }
        for (var i=0; i<onTrackFor.length; i++) {
            if (i == onTrackFor.length - 1) {
                document.getElementById("onTrackFor").innerHTML += "<li class='status'>" + onTrackFor[i] + "</li>";
            }
            document.getElementById("onTrackFor").innerHTML += "<li class='status' style='float: left;'>" + onTrackFor[i] + "</li>";
        }
    </script>
</main>