Javascript 每次用对象擦除JS数组时刷新HTML页面_Javascript_Html

Javascript 每次用对象擦除JS数组时刷新HTML页面

javascript html

Javascript 每次用对象擦除JS数组时刷新HTML页面,javascript,html,Javascript,Html,我有一个小项目，我想制作一个带有名字和姓氏的HTML表单，保存到一个对象数组中。听起来简单又酷。在你开始做之前它只是不保存数据，每次都刷新页面。preventDefault没有帮助出于某种原因，addPerson函数即使未单击submit也会激发，但绝对不知道如何在单击时设置事件侦听器，为什么它会执行未调用但仅定义的finction <!DOCTYPE html> <html> <body> <form>

我有一个小项目，我想制作一个带有名字和姓氏的HTML表单，保存到一个对象数组中。听起来简单又酷。在你开始做之前

它只是不保存数据，每次都刷新页面。preventDefault没有帮助

出于某种原因，addPerson函数即使未单击submit也会激发，但绝对不知道如何在单击时设置事件侦听器，为什么它会执行未调用但仅定义的finction

<!DOCTYPE html>
<html>
    <body>
        <form>
            <input id="firstName" type="text"> <br>
            <input id="lastName" type="text"> <br>
            <input id="age" type="number"> <br>
            <button id="submit" type="submit">
                Submit!
            </button>
        </form>
        <script src="form.js"></script>
    </body>
</html>

var submit = document.getElementById("submit");

function Person (FirstName, LastName, Age) {

    this.FirstName = FirstName;
    this.LastName = LastName;
    this.Age = Age;
}

var peopleArray = [];

function addPerson () {
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    var age = document.getElementById("age").value;
    function createObject () {
        var newObject = new Person (firstName, lastName, age);
        peopleArray.push(newObject);
    }
    createObject ();
    console.log("New person and added to list!" + " " + firstName + " " + lastName + " " + age);
    console.log(peopleArray.length);
}

submit.addEventListener("click", addPerson());```








提交
var submit=document.getElementById（“提交”）；
职能人员（名、姓、年龄）{
this.FirstName=FirstName；
this.LastName=LastName；
这个。年龄=年龄；
}
var peopleArray=[]；
函数addPerson（）{
var firstName=document.getElementById（“firstName”）.value；
var lastName=document.getElementById（“lastName”）.value；
var age=document.getElementById（“age”）.value；
函数createObject（）{
var newObject=newperson（名字、姓氏、年龄）；
peopleArray.push（newObject）；
}
createObject（）；
console.log（“新的人和添加到列表中的人！”+“”+firstName+“”+lastName+“”+age）；
log（peopleArray.length）；
}
submit.addEventListener（“单击”，addPerson（））```

您应该删除事件侦听器中的

（）

，如注释中所述。您还必须将

事件

-参数传递到函数中，使其在函数中可用。然后可以调用

preventDefault

var submit=document.getElementById（“提交”）；
职能人员（名、姓、年龄）{
this.FirstName=FirstName；
this.LastName=LastName；
这个。年龄=年龄；
}
var peopleArray=[]；
功能添加人员（事件）{
event.preventDefault（）；
var firstName=document.getElementById（“firstName”）.value；
var lastName=document.getElementById（“lastName”）.value；
var age=document.getElementById（“age”）.value；
函数createObject（）{
var newObject=newperson（名字、姓氏、年龄）；
peopleArray.push（newObject）；
}
createObject（）；
console.log（“新的人和添加到列表中的人！”+“”+firstName+“”+lastName+“”+age）；
log（peopleArray.length）；
}
submit.addEventListener（“单击”，addPerson）







提交
添加函数作为事件侦听器，而不是函数的返回值addPerson（）
这里应该是addPerson
@RobinZigmond是的，我尝试添加了。默认情况下，这样做不起作用，我删除了它，但忘了在addPerson之后删除那些（）。