动态添加HTML文档中的标记。单击按钮后立即反转

我有一个非常简单的表,有3列,显示2个团队及其得分。下表中有一个表单,可以将新团队及其分数添加到表中。只有当给定的球队有不同的名字并且分数不是负值时,才能添加新行。

我用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);
});