@maxemga

Как сделать телефонную книгу JS?

Разбираюсь с классами в JS и для закрепления материала решил создать себе задачу, телефонная книга
Есть поле и туда забиваешь Имя и Контакты, когда нажимаешь кнопку результаты должны записаться в объект и появиться ниже
Основную логику я сделал, но вопрос, как сделать так чтобы Контакты появлялись в низу бесконечно? Тоесть вот у меня сейчас там есть p и я с помощью innerHTML Туда забиваю, но это не так должно работать, ибо объектов будет много и они должны постоянно появляться друг за другом внизу. Как?
А также вопрос, как сделать так чтобы постоянно создавался новый объект? Тоесть вот я когда ввожу значения, то меняются свойся name и phone у одного объекта, а мне же нужно чтобы эти объекты дублировались, чтобы они не были одинаковым
https://jsfiddle.net/71srugza/ - мой код

А еще я нашел реализацию такой книги у одного человека и он для Отрисовки, Забивки контакта создает другие классы, но зачем если это делается в методе, а class не для этого. Это он не прав или я что-то не понимаю?
//уровень данных
class GetContact {
  constructor(name,phone,email){
    this.name = name;
    this.phone = phone;
    this.email = email;
  }
};

//уровень логики
class ContactEdit extends GetContact {
  //массив контактов
  //методы для добавления и удаления классов
  //метод для поиска по подстроке
};

//уровень графики
class TableEdit extends ContactEdit {
  //метод для добавления данных в таблицу
};

function submitForm(form) {
  let name = form.name.value;
  let phone = form.phone.value;
  let email = form.email.value;
  let newUser = new GetContact(name,phone,email);
  //вызываем методы классов
};
  • Вопрос задан
  • 95 просмотров
Решения вопроса 1
VicTHOR
@VicTHOR
(╮°-°)╮┳━━┳ ( ╯°□°)╯ ┻━━┻
Во-первых, нужно именовать методы правильно. getUser() не должен печатать данные, он должен просто вернуть юзера.
Во-вторых,
<div class="outputContent"> <p id="nameText"></p> <p id="phoneText"></p> </div>
вот этих блоков надо печатать столько, сколько юзеров вводится. По-этому этот блок нужно хранить в js, метод getUser() можно заменить на getUserContainer() например, и возвращать этот див с подставленными данными (как строку, не печатать). А еще id создаваемых блоков не должны повторяться.
В-третьих, для того, что-бы данные добавлялись, их надо добавлять.. Это можно сделать, например, с помощью insertAdjacentHTML.

Если нужно хранить каждого созданного юзера в коде, то можно просто каждого нового пользователя засунуть в массив..

Итого https://jsfiddle.net/srg0wqLt/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
XPOWER Одесса
от 3 000 до 5 500 $
07 мар. 2021, в 03:18
1500 руб./за проект
06 мар. 2021, в 22:58
70000 руб./за проект
06 мар. 2021, в 22:36
10000 руб./за проект