Как добавлять сообщение в чат не перезаписывая его?

Отправляя новое сообщение, оно сразу же перезаписывается.
Хотелось бы чтобы текст оставался, как в реальном чате
62f3ac29b816d955776019.png

const chatWrapper = document.querySelector('.chat__wrapper');
let inputMessage = document.querySelector('.input-message');
const sendMessage = document.querySelector('.send-message');
let textMessage = document.createElement('p');
	textMessage.className = 'chat-user__text';
sendMessage.addEventListener("click", function (e) {
	chatWrapper.insertAdjacentHTML('beforeend', '<div class="chat-user chat-body"><div class="chat-user__image"><img src="img/person2.png" alt=""></div><div id="wrapperMessage" class="chat-user__message chat-message"><div class="chat-user__time chat-time" id="timeAgo">8 minutes ago</div></div></div>');
	let wrapperMessage = document.getElementById('wrapperMessage');
	wrapperMessage.prepend(textMessage);
	textMessage.innerHTML = inputMessage.value;
	setTimeout(() => {
		
},0);
});
  • Вопрос задан
  • 44 просмотра
Решения вопроса 1
@Asokr
Перепишите этот участок так, чтобы
1. не было id (id должен быть уникальным, а у вас каждое сообщение с теме же id)
2. вставляйте сразу в него сообщение, зачем потом выбирать элемент по id(выбирается первый, поэтому и перезаписывается первое сообщение)
chatWrapper.insertAdjacentHTML('beforeend', '<div class="chat-user chat-body"><div class="chat-user__image"><img src="img/person2.png" alt=""></div><div id="wrapperMessage" class="chat-user__message chat-message"><div class="chat-user__time chat-time" id="timeAgo">8 minutes ago</div></div></div>');


что-то типа такого
const chatWrapper = document.querySelector('.chat__wrapper');
let inputMessage = document.querySelector('.input-message');
const sendMessage = document.querySelector('.send-message');

sendMessage.addEventListener("click", function (e) {
  chatWrapper.insertAdjacentHTML('beforeend', '<div class="chat-user chat-body"><div class="chat-user__image"><img src="img/person2.png" alt=""></div><div id="wrapperMessage" class="chat-user__message chat-message"><p class="chat-user__text">'+inputMessage.value+'</p><div class="chat-user__time chat-time" id="timeAgo">8 minutes ago</div></div></div>');
  setTimeout(() => {
    
},0);
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы