Чат с двумя пользователями на JavaScript. Как сделать так, чтобы сообщение от одного пользователя выводилось под сообщением другого пользователя?

Question

[juliatrubarova]

Здравствуйте! Пытаюсь спрограммировать на javascript чат с двумя пользователями. Сейчас есть такой код:

class Person {
constructor(name, age, profession, height, pic, elNumber) {
this.name = name;
this.age = age;
this.profession = profession;
this.height = height;
this.hobby = {
main: 'живопись',
second: 'фото'
}
this.pic = pic;
this.form = document.querySelector('.chat-center');
this.el = document.querySelectorAll('.chat-side')[elNumber];
}

createForm() {
let form = document.createElement('form');
form.innerHTML = `


`;

form.addEventListener('submit', (e) => {
this.form.innerHTML = form.elements[0].value;
e.preventDefault();
})

this.el.appendChild(form);

}

renderUser() {
let userCard = document.createElement('div');
userCard.classList.add('user-card');
userCard.innerHTML = `



${this.name}
Возраст: ${this.age}
Хобби: ${this.getHobbyString()}
Профессия: ${this.profession}


`;

this.el.appendChild(userCard);
this.createForm();
};
};

let julia = new Person('Юлия', 28, 'программист', 160, 'woman.jpg', 0);
julia.renderUser();

let dasha = new Person('Даша', 25, 'дизайнер', 170, 'devushka.jpg', 1);
dasha.renderUser();

Сейчас, когда я ввожу сообщение от одного пользователя, оно выводится в середине. Когда я ввожу от второго - оно перезаписывается на месте первого. За это отвечает этот код:

form.addEventListener('submit', (e) => {
this.form.innerHTML = form.elements[0].value;
e.preventDefault();
})

Собственно вопрос: как сделать так, чтобы сообщение от одного пользователя выводилось, а под ним сообщение от другого пользователя, а не перезаписывалось? Заранее благодарю за помощь.

Comments

[FeST1VaL]

а если обновить страницу, то чат потерян? ну такое себе

[Пашенька]

Артем Будин, зато секьюрно как. Телеграм и рядом не валялся с своим нерасшифруемым шифрованием.