HTML page refreshing every time erasing JS array with objects

Question

Well i have a small project where i want to make an HTML form with Name and Surname that are saved into an array of objects. Sounds simple and cool. Well its until you start making it...

It just doesnt save the data and refreshes the page every time and .preventDefault doesnt help.

And for some reason addPerson function fires even if the submit is not clicked, have absolutely no idea how - event listener is set on click - why does it execute finction that is not called, but only defined?

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

you add a function as an event listener, not the return value of a function. addPerson() here should be simply addPerson — Robin Zigmond
– Robin Zigmond, Commented May 18, 2019 at 21:39
@RobinZigmond yeah i tried to add .preventDefault that way, that didnt work and i removed it all but forgot to remove those () after addPerson. — Gerpstarg
– Gerpstarg, Commented May 18, 2019 at 21:49

Jan · Accepted Answer · 2019-05-18 21:57:47Z

You should remove the () in the event-listener, as mentioned in the comments. You also have to pass the event-paramter into the function so its available inside. Then you can call 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>

Collectives™ on Stack Overflow

HTML page refreshing every time erasing JS array with objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related