时间戳

首页 > 解决方案 > 每次使用对象擦除 JS 数组时刷新 HTML 页面

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

问题描述

好吧，我有一个小项目，我想制作一个带有名称和姓氏的 HTML 表单，这些表单保存到对象数组中。听起来简单而酷。好吧，直到你开始制作它......

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

并且由于某种原因，即使未单击提交，addPerson 函数也会触发，完全不知道如何 - 单击时设置事件侦听器 - 为什么它执行未调用但仅定义的函数？

<!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());```

标签： javascripthtml

解决方案

如评论中所述，您应该删除()事件侦听器中的 。您还必须将event-paramter 传递给函数，以便它在内部可用。然后就可以调用了preventDefault。

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

function Person (FirstName, LastName, Age) {

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

var peopleArray = [];

function addPerson(event) {
    event.preventDefault();
    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);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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>

推荐阅读