代码之家 › 专栏 › 技术社区 › Joanna

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

createelement html javascript

Joanna · 技术社区 · 8 年前

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

1 回复 | 直到 2 年前

NineBerry 8 年前

这里的问题是按钮是HTML的一部分 <form> .单击按钮将提交表单并导致重新加载页面。

这个问题有三种不同的解决方案。使用以下任一项:

1) 将按钮放置在窗体外部。移除 <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(); 适用于较新的浏览器。