Динамическое добавление тегов в HTML-документ по нажатию кнопки сразу же отменяется

Question

У меня очень простая таблица с 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);
});

Answer 1

Проблема здесь в том, что кнопка является частью HTML <form>, Нажатие на кнопку отправляет форму и приводит к перезагрузке страницы.

Существует три возможных решения проблемы. используйте любой из них:

---

1) Поместите кнопку за пределы формы. Удалить <form></form> теги, если они вам не нужны, или разместите кнопку где-нибудь за пределами <form></form> теги.

---

2) Специально пометьте кнопку как кнопку, которая не отправляет форму:

<button type="button" class="btn-primary">Push me</button>

type="button" не позволяет кнопке отправить форму.

---

3) В обработчике javascript кнопки скажите кнопке не показывать ее поведение по умолчанию, например:

function validate(e) {
{
    // Your current code here       

    // Additional code to prevent button from showing default behaviour
    e.preventDefault();
    e.returnValue = false;
}

e.returnValue = false; для старых браузеров, e.preventDefault(); для новых браузеров.