javascript電話簿項目添加新記錄后刷新頁面

Question

我有這個 vanilla js 項目，它應該是一個具有添加、刪除和搜索功能的電話簿。

問題是當我嘗試添加新記錄時，記錄出現后立即消失。 我假設頁面刷新，但我不知道為什么。

這是電話簿 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 () {

  };
  
}

當用戶單擊頁面上的添加按鈕時，將調用元素的 onClick 事件，並在其中調用phonebook.add()並使用用戶輸入的名稱和電話。

鏈接到 github 上的代碼： https://github.com/newshahn/vanillajsphonebook

如果需要更多信息，請告訴我。

Answer 1

我認為問題是按下按鈕時表單正在提交，您需要從 on button click 事件處理程序中調用 e.preventDefault() ，否則它將提交頁面。 onclick = function() {}可以接受參數onclick = function(e) {... e.preventDefault() }

恕我直言，id 建議將頁面元素放入 html 中，而不是通過 js 中的 dom 操作來構建整個頁面。 很難看到發生了什么。