时间戳

首页 > 解决方案 > 添加新记录后javascript电话簿项目刷新页面

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

问题描述

我有这个 vanilla js 项目，它应该是一个具有添加、删除和搜索功能的电话簿。

问题是当我尝试添加新记录时，记录出现后立即消失。我假设页面刷新，但我不知道为什么。

这是电话簿功能：

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 () {

  };
  
}

当用户单击页面上的添加按钮时，将调用元素的 onClick 事件，并在其中phonebook.add()使用用户输入的姓名和电话进行调用。

链接到 github 上的代码： https ://github.com/newshahn/vanillajsphonebook

如果需要更多信息，请告诉我。

标签： javascripthtml

解决方案

我认为问题是按下按钮时表单正在提交，您需要从 on button click 事件处理程序中调用 e.preventDefault() ，否则它将提交页面。可以onclick = function() {} 接受论点 onclick = function(e) { ... e.preventDefault() }

恕我直言，id 建议将页面元素放入 html 中，而不是通过 js 中的 dom 操作来构建整个页面。很难看到发生了什么。

推荐阅读