单击按钮时在 HTML 文档中动态添加标签立即撤消

Question

我有非常简单的 table，其中 3 列显示 2 个团队及其分数。在 table 下面有一个表单，可以将新团队及其分数添加到 table。仅当给定的团队名称不同且分数不为负时，才应添加新行。我在 JavaScript 中编写了以下代码，但它没有添加该行 - 它仅在单击确认按钮时才显示新行。如果不是，数据就会消失。你能看看我的代码并检查它可能有什么问题吗？我试图在没有验证事件的情况下向 table 添加行，并且它工作得很好。

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

单击按钮时在 HTML 文档中动态添加标签立即撤消

Dynamically adding tags in HTML document on button click immediately reversed

javascript

createelement

htmlbutton