1

我有一个非常简单的表格，有 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);
});
4

1 回答 1

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();较新浏览器。

于 2016-10-30T16:04:28.077 回答