javascript电话簿项目添加新记录后刷新页面

Question

I have this vanilla js project which is supposed to be a phonebook with add, remove, and search functionalities.

Problem is when I try to add a new record, the record disappears right after showing up. I assume the page refreshes but I don't know why.

This is the phonebook function:

function PhoneBook() {
  this.records = [];

  this.add = function (name, phone) {
    const contact = new PhoneBookRecord(name, phone);
    this.records.push(contact);

    // this.records.forEach(function (item) {
      
    // })

    
    console.log(this.records);
    return this;
  };

  this.search = function (name) {
    const result = this.records.includes(name);
  };

  this.remove = function () {

  };
  
}

When a user clicks on the add button on page, the element's onClick event is called and inside that phonebook.add() is called with the name and phone the user has entered.

Link to code on github: https://github.com/newshahn/vanillajsphonebook

Please let me know if any more information is needed.

Answer 1

I think the issue is the form is submitting when the button is pressed, you need to call e.preventDefault() from the on button click event handlers or it will submit the page. the onclick = function() {} can take the argument onclick = function(e) {... e.preventDefault() }

With all due respect, id recommend putting the page elements into the html and not building the entire page through dom manipulation in js. its was not easy to see what was going on.