javascript - フォームの送信時に URL パラメータが追加されないようにする

Question

さて、これはばかげた質問かもしれませんが、フォームを含む単純な JavaScript アプリを作成しようとしています (私の用語を許してください、私はこれに慣れていません)。および JS (および CSS) を使用しているため、document.getElementById を使用してフォームの値にアクセスしています。

問題は、フォームの値に基づいて Javascript 関数が何かを表示することになっていることです (基本的には GPA 計算機です) が、表示するものは単に画面上で点滅し、HTML ファイルをそのまま実行すると消え、実際のドメインで実行すると、まったく表示されません。この理由は、フォームを送信した後、一連の URL パラメーターが追加され、HTML が更新され、新しく追加された innerHTML が削除されるためだと思います。

私のフォームのコードは次のとおりです。

<form id="calculator" name="calculator">
            <table>
                <thead>
                    <tr>
                        <td>Class Number</td>
                        <td>Grade</td>
                        <td>AP/Non-AP</td>
                        <td>GPA</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="classnumber">Class 1</td>
                        <td>
                            <select id="class1GPA" name="class1GPA">
                                <option value=4.4 selected>A+</option>
                                <option value=4.0>A</option>
                                <option value=3.7>A-</option>
                                <option value=3.4>B+</option>
                                <option value=3.0>B</option>
                                <option value=2.7>B-</option>
                                <option value=2.4>C+</option>
                                <option value=2.0>C</option>
                                <option value=1.7>C-</option>
                                <option value=1.4>D+</option>
                                <option value=1.0>D</option>
                                <option value=0.7>D-</option>
                                <option value=0>F</option>
                            </select>
                        </td>
                        <td>
                            <select id="class1AP" name="class1AP">
                                <option value=False selected>Regular Class</option>
                                <option value=True>AP Class</option>
                            </select>
                        </td>
                        <td id="class1disp">

                        </td>
                    </tr>
                    <tr>
                        <td class="classnumber">Class 2</td>
                        <td>
                            <select id="class2GPA" name="class2GPA">
                                <option value=4.4 selected>A+</option>
                                <option value=4.0>A</option>
                                <option value=3.7>A-</option>
                                <option value=3.4>B+</option>
                                <option value=3.0>B</option>
                                <option value=2.7>B-</option>
                                <option value=2.4>C+</option>
                                <option value=2.0>C</option>
                                <option value=1.7>C-</option>
                                <option value=1.4>D+</option>
                                <option value=1.0>D</option>
                                <option value=0.7>D-</option>
                                <option value=0>F</option>
                            </select>
                        </td>
                        <td>
                            <select id="class2AP" name="class2AP">
                                <option value=False selected>Regular Class</option>
                                <option value=True>AP Class</option>
                            </select>
                        </td>
                        <td id="class2disp">

                        </td>
                    </tr>
                    <tr>
                        <td class="classnumber">Class 3</td>
                        <td>
                            <select id="class3GPA" name="class3GPA">
                                <option value=4.4 selected>A+</option>
                                <option value=4.0>A</option>
                                <option value=3.7>A-</option>
                                <option value=3.4>B+</option>
                                <option value=3.0>B</option>
                                <option value=2.7>B-</option>
                                <option value=2.4>C+</option>
                                <option value=2.0>C</option>
                                <option value=1.7>C-</option>
                                <option value=1.4>D+</option>
                                <option value=1.0>D</option>
                                <option value=0.7>D-</option>
                                <option value=0>F</option>
                            </select>
                        </td>
                        <td>
                            <select id="class3AP" name="class3AP">
                                <option value=False selected>Regular Class</option>
                                <option value=True>AP Class</option>
                            </select>
                        </td>
                        <td id="class3disp">

                        </td>
                    </tr>
                    <tr>
                        <td class="classnumber">Class 4</td>
                        <td>
                            <select id="class4GPA" name="class4GPA">
                                <option value=4.4 selected>A+</option>
                                <option value=4.0>A</option>
                                <option value=3.7>A-</option>
                                <option value=3.4>B+</option>
                                <option value=3.0>B</option>
                                <option value=2.7>B-</option>
                                <option value=2.4>C+</option>
                                <option value=2.0>C</option>
                                <option value=1.7>C-</option>
                                <option value=1.4>D+</option>
                                <option value=1.0>D</option>
                                <option value=0.7>D-</option>
                                <option value=0>F</option>
                            </select>
                        </td>
                        <td>
                            <select id="class4AP" name="class4AP">
                                <option value=False selected>Regular Class</option>
                                <option value=True>AP Class</option>
                            </select>
                        </td>
                        <td id="class4disp">

                        </td>
                    </tr>
                    <tr>
                        <td class="classnumber">Class 5</td>
                        <td>
                            <select id="class5GPA" name="class5GPA">
                                <option value=4.4 selected>A+</option>
                                <option value=4.0>A</option>
                                <option value=3.7>A-</option>
                                <option value=3.4>B+</option>
                                <option value=3.0>B</option>
                                <option value=2.7>B-</option>
                                <option value=2.4>C+</option>
                                <option value=2.0>C</option>
                                <option value=1.7>C-</option>
                                <option value=1.4>D+</option>
                                <option value=1.0>D</option>
                                <option value=0.7>D-</option>
                                <option value=0>F</option>
                            </select>
                        </td>
                        <td>
                            <select id="class5AP" name="class5AP">
                                <option value=False selected>Regular Class</option>
                                <option value=True>AP Class</option>
                            </select>
                        </td>
                        <td id="class5disp">

                        </td>
                    </tr>
                    <tr>
                        <td class="classnumber">Class 6</td>
                        <td>
                            <select id="class6GPA" name="class6GPA">
                                <option value=4.4 selected>A+</option>
                                <option value=4.0>A</option>
                                <option value=3.7>A-</option>
                                <option value=3.4>B+</option>
                                <option value=3.0>B</option>
                                <option value=2.7>B-</option>
                                <option value=2.4>C+</option>
                                <option value=2.0>C</option>
                                <option value=1.7>C-</option>
                                <option value=1.4>D+</option>
                                <option value=1.0>D</option>
                                <option value=0.7>D-</option>
                                <option value=0>F</option>
                            </select>
                        </td>
                        <td>
                            <select id="class6AP" name="class6AP">
                                <option value=False selected>Regular Class</option>
                                <option value=True>AP Class</option>
                            </select>
                        </td>
                        <td id="class6disp">

                        </td>
                    </tr>
                    <tr>
                        <td class="classnumber">Class 7</td>
                        <td>
                            <select id="class7GPA" name="class7GPA">
                                <option value="none">N/A</option>
                                <option value=4.4 selected>A+</option>
                                <option value=4.0>A</option>
                                <option value=3.7>A-</option>
                                <option value=3.4>B+</option>
                                <option value=3.0>B</option>
                                <option value=2.7>B-</option>
                                <option value=2.4>C+</option>
                                <option value=2.0>C</option>
                                <option value=1.7>C-</option>
                                <option value=1.4>D+</option>
                                <option value=1.0>D</option>
                                <option value=0.7>D-</option>
                                <option value=0>F</option>
                            </select>
                        </td>
                        <td>
                            <select id="class7AP" name="class7AP">
                                <option value=False selected>Regular Class</option>
                                <option value=True>AP Class</option>
                            </select>
                        </td>
                        <td id="class7disp">

                        </td>
                    </tr>
                    <tr>
                        <td class="classnumber">Class 8</td>
                        <td>
                            <select id="class8GPA" name="class8GPA">
                                <option value="none">N/A</option>
                                <option value=4.4 selected>A+</option>
                                <option value=4.0>A</option>
                                <option value=3.7>A-</option>
                                <option value=3.4>B+</option>
                                <option value=3.0>B</option>
                                <option value=2.7>B-</option>
                                <option value=2.4>C+</option>
                                <option value=2.0>C</option>
                                <option value=1.7>C-</option>
                                <option value=1.4>D+</option>
                                <option value=1.0>D</option>
                                <option value=0.7>D-</option>
                                <option value=0>F</option>
                            </select>
                        </td>
                        <td>
                            <select id="class8AP" name="class8AP">
                                <option value=False selected>Regular Class</option>
                                <option value=True>AP Class</option>
                            </select>
                        </td>
                        <td id="class8disp">

                        </td>
                    </tr>
                    </br>
                </tbody>
            </table>
            <input onClick="showGPA()" id="submit" type="submit" value="Calculate!"/>
        </form>

そして、それを処理することになっているJavascript（実際にはまだ平均を表示していませんが、なぜ点滅/表示しないのかを理解することほど重要ではありません）：

function showGPA() {
var grades = {};
grades.classesNumber = 6
if (document.getElementById('class1AP').value === "True") {
    grades.class1 = parseFloat(document.getElementById('class1GPA').value) + 0.5;
} else {
    grades.class1 = parseFloat(document.getElementById('class1GPA').value);
}
document.getElementById('class1disp').innerHTML = grades.class1.toFixed(1);

if (document.getElementById('class2AP').value === "True") {
    grades.class2 = parseFloat(document.getElementById('class2GPA').value) + 0.5;
} else {
    grades.class2 = parseFloat(document.getElementById('class2GPA').value);
}
document.getElementById('class2disp').innerHTML = grades.class2.toFixed(1);

if (document.getElementById('class3AP').value === "True") {
    grades.class3 = parseFloat(document.getElementById('class3GPA').value) + 0.5;
} else {
    grades.class3 = parseFloat(document.getElementById('class3GPA').value);
}
document.getElementById('class3disp').innerHTML = grades.class3.toFixed(1);

if (document.getElementById('class4AP').value === "True") {
    grades.class4 = parseFloat(document.getElementById('class4GPA').value) + 0.5;
} else {
    grades.class4 = parseFloat(document.getElementById('class4GPA').value);
}
document.getElementById('class4disp').innerHTML = grades.class4.toFixed(1);

if (document.getElementById('class5AP').value === "True") {
    grades.class5 = parseFloat(document.getElementById('class5GPA').value) + 0.5;
} else {
    grades.class5 = parseFloat(document.getElementById('class5GPA').value);
}
document.getElementById('class5disp').innerHTML = grades.class5.toFixed(1);

if (document.getElementById('class6AP').value === "True") {
    grades.class6 = parseFloat(document.getElementById('class6GPA').value) + 0.5;
} else {
    grades.class6 = parseFloat(document.getElementById('class6GPA').value);
}
document.getElementById('class6disp').innerHTML = grades.class6.toFixed(1);

if (document.getElementById('class7GPA').value !== "none") {
    if (document.getElementById('class7AP').value === "True") {
        grades.class7 = parseFloat(document.getElementById('class7GPA').value) + 0.5;
    } else {
        grades.class7 = parseFloat(document.getElementById('class7GPA').value);
    }
    document.getElementById('class7disp').innerHTML = grades.class7.toFixed(1);
    grades.classesNumber++;
} else {
    grades.class7 = 0;
}

if (document.getElementById('class8GPA').value !== "none") {
    if (document.getElementById('class8AP').value === "True") {
        grades.class8 = parseFloat(document.getElementById('class8GPA').value) + 0.5;
    } else {
        grades.class8 = parseFloat(document.getElementById('class8GPA').value);
    }
    document.getElementById('class8disp').innerHTML = grades.class8.toFixed(1);
    grades.classesNumber++;
} else {
    grades.class8 = 0;
}

}

フォームの送信時に 16 個の異なる URL パラメータが追加されないようにするにはどうすればよいですか?

私が言ったように、なぜそれがうまくいかないのかについての私の推測は完全に間違っているかもしれません. (これを機能させようとしているときに、問題の 1 つは、.innerHTML を .innerHTML と綴っていたことに気付きました)

しかし、できればPHPなどを学ばなくても、誰かがこれを機能させるのを手伝ってくれたら、それは素晴らしいことです. ありがとう！