Я хочу создать таблицу из данных, находящихся в localStorage
. Для этого реализован метод добавления: addToBook ()
. и метод удаления: removeContact (e)
, из которого я отправляю данные в localStorage
.
Но я получаю две ошибки:
Первая: "Uncaught TypeError: Can not set property 'innerHTML' of indefinite"
Вторая: "Uncaught ReferenceError: LocalStorage is not defined"
Нужно, чтобы данные были правильно добавлены / удалены в массив и localStorage. И что бы эти данные, были созданы или удалены в таблице при манипуляциях с DOM, что я пытаюсь сделать в методе: drowTable ()
. Помогите решить эту проблему
class Contacts {
constructor() {
// Storage Array
this.contacts = [];
}
addToBook() {
let isNull = forms.name.value != '' && forms.phone.value != '' &&
forms.email.value != '';
if (isNull) {
// format the input into a valid JSON structure
let obj = new LocalStorage(forms.name.value, forms.phone.value,
forms.email.value);
this.contacts.push(obj);
localStorage["addbook"] = JSON.stringify(this.contacts);
table.show();
}
console.log(this.contacts);
}
removeContact(e) {
// Remove an entry from the addressbook
if (e.target.classList.contains('delete')) {
let remID = e.target.getAttribute('data-id');
this.contacts.splice(remID, 1);
localStorage['addbook'] = JSON.stringify(this.contacts);
table.show();
}
}
}
let data = new Contacts();
class Forms {
constructor() {
// Blocks
this.BookDiv = document.querySelector('.addbook');
// Forms
this.fields = document.forms[0].elements;
this.name = this.fields[0].value;
this.phone = this.fields[1].value;
this.email = this.fields[2].value;
// Buttons
this.addBtn = document.getElementById("Add");
this.addBtn.addEventListener("click", data.addToBook.bind(data));
this.BookDiv.addEventListener("click", data.removeContact.bind(data))
}
}
class ShowAddressBook {
constructor() {
};
drowTable() {
if (localStorage['addbook'] === undefined) {
localStorage['addbook'] = '';
} else {
data.contacts = JSON.parse(localStorage['addbook']);
// Loop over the array addressBook and insert into the page
data.BookDiv.innerHTML = '';
const rows = document.querySelectorAll("#book .data");
for (let i = rows.length - 1; i >= 0; i--) {
const e = rows.item(i);
e.parentNode.removeChild(e);
}
const table = document.getElementById("shop");
for (let i = 0; i < data.contacts.length; i++) {
//create table
table.innerHTML += `<tbody><tr class="data">
<td class="checkBox"><input type="checkbox"></td>
<td>${data.contacts[i].name}</td>
<td>${data.contacts[i].phone}</td>
<td>${data.contacts[i].email}</td>
<td ><i class="far fa-trash-alt delete" data-id="' + i + '"></i></td>
</tr></tbody>`;
}
}
this.drowTable();
console.log(data.contacts);
}
}
let table = new ShowAddressBook();
let forms = new Forms();
table.drowTable();
class LocalStorage {
constructor(name, phone, email) {
this.name = name;
this.phone = phone;
this.email = email;
}
}
<div class="AddNewContact">
<i class="fas fa-search "></i>
</div>
<div class="addNewContact-form">
<form name="register">
<label for="name">Name</label><input type="text" id="name" class="formFields">
<label for="phone">Phone</label><input type="text" id="phone" class="formFields">
<label for="email">E-Mail</label><input type="text" id="email" class="formFields">
<br><br>
<button id="Add" type="button">Add Now</button><button id="Cancel" type="button">Cancel</button>
</form>
</div>
<div class="addbook">
<table id="book">
<thead>
<tr>
<th class="check"></th>
<th class="name">Name: <i class="fas fa-arrows-alt-v"></i></th>
<th class="phone">Phone: <i class="fas fa-arrows-alt-v"></i></th>
<th class="email">E-mail: <i class="fas fa-arrows-alt-v"></i></th>
<th class="del"></th>
</tr>
</thead>
</table>
</div>
Ну и подход к ООП у Вас...
Но тем не менее...
1. Вы создали глобально let data = new Contacts();
и пытаетесь взять свойство data.BookDiv
, но его там нет, т.к вы описали его в классе Forms
.
2. Класс LocalStorage
на момент его использования еще не был описан, попробуйте объявить его в начале файла
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Доброй ночиУважаемые знатоки, подскажите, как прочесть данные типа json:
Я тут учу vue и пишу простенький магазин для практикиИ не могу понять почему не обновляется корзина, то есть обновляется объект cart, но в разметке...