Why does not work the addition / removal of elements in “LocalStorage”?

Question

I want to add: the name, phone and mail of the user in the localStorage using the method: addContact() and with the data that is there in localStorage , I create the table using the method show() .

Also does not happen delete the contact, I'm trying to do with the method: deleteContact(e) .

• When I add contact I receive the following error: Uncaught TypeError: Cannot read property 'value' of undefined
• When I deleting I receive the following error: Uncaught TypeError: Cannot read property 'splice' of undefined

Help me fix that

 //Product Creation Class class LocalStorage { constructor(name, phone, email) { this.name = name; this.phone = phone; this.email = email; } } // Сlass where products are recorded class Book { constructor() { this.products = []; this.name = document.getElementById("name"); this.phone = document.getElementById("phone"); this.email = document.getElementById("email"); this.buttAdd = document.getElementById("add"); this.book = document.getElementById("addBook"); } //method for adding a product addContact() { let isNull = this.name.value != '' && this.phone.value != '' && this.email.value != ''; if (isNull) { let obj = new LocalStorage(this.name.value, this.phone.value, this.email.value); this.products.push(obj); localStorage['addbook'] = JSON.stringify(this.products); this.show(); } } //method for remove product by name deleteContact(e) { if (e.target.className === "delbutton") { let remID = e.target.getAttribute('data-id'); this.products.splice(remID, 1); localStorage['addbook'] = JSON.stringify(this.products); this.show(); } } // method to draw the table with product property ( // name, phone, email) show() { if (localStorage['addbook'] === undefined) { localStorage['addbook'] = ''; } else { this.products = JSON.parse(localStorage['addbook']); this.book.innerHTML = ''; for (let e in this.products) { let table = ` <table id="shop" class="entry"> <tr> <th>Name:</th> <th id="filter">Phone:</th> <th>Email:</th> <th class="dels"></th> </tr> <tbody> <tr class="data"> <td>${this.products[e].name}</td> <td>${this.products[e].phone}</td> <td>${this.products[e].email}</td> <td class="del"><a href="#" class="delbutton" data-id="' + e + '">Delete</a></td> </tr> </tbody> </table>`; this.book.innerHTML += table; } } } OperationsWithContacts() { // add new product by click this.buttAdd.addEventListener('click', this.addContact); // delete product by name after click this.book.addEventListener('click', this.deleteContact); console.log(this.products); } } let shop = new Book(); shop.show(); shop.OperationsWithContacts(); 

 <div class="Shop"> <div class="add-product"> <h1>Add product</h1> <form name="addForm"> <label for="name" >Name of product</label> <input type="text" id="name" class="input-product"> <label for="phone">Price of product</label> <input type="number" id="phone" class="input-product"> <label for="email">Count of product</label> <input type="text" id="email" class="input-product"> <button id="add" type="button">Add</button> </form> </div> <div class="product-table"> <h2>Address book</h2> <div id="delete-form"> <label for="name-delete">Search product by name</label> <input type="text" id="name-delete" class="input-delete"> </div> <div id="addBook"></div> </div> </div> 

enter code here

Answer 1

The obivous issue I see is that this in both your functions addContact() and deleteContact() represents a button -HTML-Element and not the class you think it does.

Just change the code a bit and you will see: //method for adding a product

addContact() {
    console.log('addContact()', this);

    let isNull = this.name.value != '' && this.phone.value != '' && this.email.value != '';
    if (isNull) {
        let obj = new LocalStorage(this.name.value, this.phone.value, this.email.value);
        this.products.push(obj);
        localStorage['addbook'] = JSON.stringify(this.products);
        this.show();
    }
}

So you might want to change your bind from:

document.querySelector('#add').addEventListener('click', this.addContact);

to

document.querySelector('#add').addEventListener('click', this.addContact.bind(this));

to properly reuse the this shortcut.

Edit:

 //Product Creation Class //REM: Not the best name choice here.. localStorage <> LocalStorage class LocalStorage{ constructor(name, phone, email){ this.name = name; this.phone = phone; this.email = email } }; //Сlass where products are recorded class Book{ constructor(){ this.products = []; this.name = document.getElementById("name"); this.phone = document.getElementById("phone"); this.email = document.getElementById("email"); this.buttAdd = document.getElementById("add"); this.book = document.getElementById("addBook") }; //method for adding a product addContact(){ let isNull = this.name.value != '' && this.phone.value != '' && this.email.value != ''; if(isNull){ let obj = new LocalStorage(this.name.value, this.phone.value, this.email.value); this.products.push(obj); localStorage['addbook'] = JSON.stringify(this.products); this.show(); } }; //method for remove product by name deleteContact(e) { if(e.target.className === "delbutton"){ let remID = e.target.getAttribute('data-id'); this.products.splice(remID, 1); localStorage['addbook'] = JSON.stringify(this.products); this.show(); } }; //method to draw the table with product property ( //name, phone, email) show(){ if(localStorage['addbook'] === undefined) { //REM: An empty string is no valid JSON to be serialised localStorage['addbook'] = '[]' } else{ this.products = JSON.parse(localStorage['addbook']); this.book.innerHTML = ''; for(let e in this.products){ let table = ` <table id="shop" class="entry"> <tr> <th>Name:</th> <th id="filter">Phone:</th> <th>Email:</th> <th class="dels"></th> </tr> <tbody> <tr class="data"> <td>${this.products[e].name}</td> <td>${this.products[e].phone}</td> <td>${this.products[e].email}</td> <td class="del"><a href="#" class="delbutton" data-id="' + e + '">Delete</a></td> </tr> </tbody> </table>`; this.book.innerHTML += table; } } }; OperationsWithContacts(){ // add new product by click this.buttAdd.addEventListener('click', this.addContact.bind(this)); // delete product by name after click this.book.addEventListener('click', this.deleteContact.bind(this)); console.log(this.products); } }; ;window.onload = function(){ let shop = new Book(); shop.show(); shop.OperationsWithContacts() }; 

 <div class="Shop"> <div class="add-product"> <h1>Add product</h1> <form name="addForm"> <label for="name" >Name of product</label> <input type="text" id="name" class="input-product"> <label for="phone">Price of product</label> <input type="number" id="phone" class="input-product"> <label for="email">Count of product</label> <input type="text" id="email" class="input-product"> <button id="add" type="button">Add</button> </form> </div> <div class="product-table"> <h2>Address book</h2> <div id="delete-form"> <label for="name-delete">Search product by name</label> <input type="text" id="name-delete" class="input-delete"> </div> <div id="addBook"></div> </div> </div>