javascript - ボタンのクリック時にHTMLドキュメントにタグを動的に追加すると、すぐに元に戻されます

Question

2 つのチームとそのスコアを示す 3 つの列を持つ非常に単純なテーブルがあります。テーブルの下には、新しいチームとそのスコアをテーブルに追加できるフォームがあります。特定のチームの名前が異なり、スコアが負でない場合にのみ、新しい行を追加する必要があります。以下のコードを JavaScript で記述しましたが、行は追加されません。確認ボタンがクリックされた場合にのみ、新しい行が表示されます。そうでない場合、データは消えます。私のコードを見て、何が問題なのかを確認できますか? 検証イベントなしでテーブルに行を追加しようとしましたが、完全に正常に機能しました。

document.addEventListener("DOMContentLoaded", function () {

var team1 = document.getElementById("team1");
var team2 = document.getElementById("team2");
var points1 = document.getElementById("points1");
var points2 = document.getElementById("points2");
var button = document.querySelector(".btn-primary");
var table = document.querySelector("table");

function validate(e) {
    if (team1.value === team2.value) {
        alert("Enter two differnt teams' names");
    } else if (points1.value < 0 || points2.value < 0) {
        alert("Points number cannot be negative");
    } else {
        var newRow = document.createElement("tr");
        table.appendChild(newRow);
        var newTeam1 = document.createElement("td");
        newRow.appendChild(newTeam1);
        newTeam1.innerHTML = team1.value;
        var newTeam2 = document.createElement("td");
        newRow.appendChild(newTeam2);
        newTeam2.innerHTML = team2.value;
        var newPoints = document.createElement("td");
        newRow.appendChild(newPoints);
        newPoints.innerHTML = points1.value + " - " + points2.value;
    }
}

button.addEventListener("click", validate);
});