Мессенджер [23/23]


var varForm = document.querySelector(’.chat-form’);
var varChat = document.querySelector(’.chat-content’);
var input = document.querySelector(’.chat-form-input’);
var varTemp = document.querySelector(’#message-template’).content;
var message = varTemp.querySelector(’.chat-message’);

var messageRemoover = function (message) {
var remButton = message.querySelector(’.chat-message-button’);
remButton.addEventListener(‘click’, function () {
message.remove();
});
};

varForm.addEventListener(‘submit’, function(evt) {
evt.preventDefault();
var newMessage = message.cloneNode(true);
var text = newMessage.querySelector(’.chat-message-text’);
var name = newMessage.querySelector(’.chat-message-name’)
var value = input.value;
text.textContent = value;
varChat.appendChild(newMessage);
messageRemoover(newMessage);
});

разобрался, отбой

что было-то?

На скриншотах не заметил отличие в поле ввода, после text.textContent = value;
дописал input.value = “”; чтобы обнулить его и там опять появился placeholder

да блин. кароч в след раз присылайте отформатированный код. я где-то кавычку вашу не переделал (форум меняет вид кавычек), думал проблема в удалении сообщения.

а эту ошибку сразу поправил и ппц измучился с удалением сообщения

такая же проблема как описано выше - вроде все работатет но проверку не проходит -
var messagesList = document.querySelector(’.chat-content’);
var messagesItems = messagesList.children;
var addNewMessageForm = document.querySelector(’.chat-form’);
var newMessageItem = addNewMessageForm.querySelector(’.chat-form-input’);
var template = document.querySelector(’#message-template’).content;
var newMessageTemplate = template.querySelector(’.chat-message’);

var closeHandler = function (item) {
  var messageCloseButton = item.querySelector('.chat-message-button');
  messageCloseButton.addEventListener('click', function () {
  item.classList.add('visually-hidden');
  });
};

for (var i = 0; i < messagesItems.length; i++) {
  closeHandler(messagesItems[i]);
}

addNewMessageForm.addEventListener('submit', function (evt) {
  evt.preventDefault();

  var messageText = newMessageItem.value;
  var message = newMessageTemplate.cloneNode(true);
  var messageContent = message.querySelector('.chat-message-text');
  messageContent.textContent = messageText;
  messagesList.appendChild(message);
  newMessageItem.value = '';
  closeHandler(message);
});

смотрите в чем ваша проблема, вы по факту не удаляете узлы, а просто скрываете их.

открывать в случае отчаяния

подумайте какую строчку нужно заменить вот этой:

 item.parentNode.removeChild(item);

или вот этой:

 item.remove();
1 лайк

Спасибо. Сильно помогло:sweat_smile::hugs:

Интуиция мне подсказывает, что наличие цикла в этом скрипте при количестве 1000 и более сообщений в чате убьёт компьютер пользователя. Я прав? Какие ещё есть методы навешать кнопку удаления?

обработчик закрытия достаточно вешать в момент создания сообщения, т.е. во время срабатывания обработчика “submit”
просто в данном случае мы достаем из кэша старые сообщения и развешиваем на него обработчик (т.е. это история сообщений, а не только что созданная “мессага”). по хорошему это должно происходить в момент подгрузки старых сообщений.

Подскажите пожалуйста. Я уже не могу. Как добавить удаление на кнопку? Двумя способами пробую. Нифига

Первый вариант
//Собщение
var templateContent = document.querySelector("#message-template").content;
var messageInTemplate = templateContent.querySelector(".chat-message-text").textContent;

//Отправка
var buttonSubmit = document.querySelector(".chat-form");
var inputMessage = buttonSubmit.querySelector(".chat-form-input");

var messanger = document.querySelector(".chat-content");

//Код
var remover = function (message) {
  var exitButton = message.querySelector(".chat-message-button");
  exitButton.addEventListener("click", function () {
      message.remove();
    });
};


buttonSubmit.addEventListener("submit", function (evt) {
  evt.preventDefault();
  
  var newMessage = templateContent.cloneNode(true);  
  
  var newText = newMessage.querySelector("p");
  var textMessage = inputMessage.value;
  newText.textContent = textMessage;  
  
  remover(newMessage);
  messanger.appendChild(newMessage);
  inputMessage.value = "";
});
Второй
`//Собщение
var templateContent = document.querySelector("#message-template").content;
var messageInTemplate = templateContent.querySelector(".chat-message-text").textContent;

//Отправка
var buttonSubmit = document.querySelector(".chat-form");
var inputMessage = buttonSubmit.querySelector(".chat-form-input");

var messanger = document.querySelector(".chat-content");

//Код
buttonSubmit.addEventListener("submit", function (evt) {
  evt.preventDefault();
  
  var newMessage = templateContent.cloneNode(true);  
  var exitButton = newMessage.querySelector(".chat-message-button");
  
  var newText = newMessage.querySelector("p");
  var textMessage = inputMessage.value;
  newText.textContent = textMessage;  
  
  exitButton.addEventListener("click", function () {
      newMessage.remove();
    });
  
  messanger.appendChild(newMessage);
  inputMessage.value = "";
});`

О даааааа. Нашел. Я клонировал document-fragment а не div

к templateContent еще допишите в объявлении .querySelector(".chat-message") для первого варианта

Спс, он там в обоих нужен, из за него и не выходило))))

Как вы смогли прийти к такому решению? Я прошёл эти же курсы и например не встречал поиск по id, а вы использовали такой метод. Я хотел сделать задания используя код из обучения. Но там не совпадают html шаблоны)))) По итогу пришлось через ваши ответы разбираться и смотреть как сделать задание :frowning:

Можно спросить, как я понял отвечать на вопросы на этом сайте, это ваша работа. Хотел узнать по сколько часов в день вы работаете на этом сайте?

нет, это не моя работа, я такой же юзер как и вы =) отвечаю я вам потому что мне не сложно, заодно и тестирую свои навыки code-reviewer’а

1 лайк

Странно… Я был уверен на 99.9% что вы модератор на этом сайте. Мне кажется это же не логично тратить время просто на форуме, когда вы и так профи и можете просто сайты делать и зарабатывать деньги.

А если вы обычный юзер, почему у вас доступ к платным заданиям? Вы купили подписку?

потому что я купил подписку на год =) не бойтесь, через 3 недели подписка кончится и я покину вас. уже учусь в другой школе по фронтэнду, там пожестче все.

я таким образом тренирую внимательность, смотрю где люди ошибаются и там уже не делаю ошибок, а до профи мне далеко, как пешком до парижу. просто на форуме этого не заметно, но на курсах преподают абсолютный мизер от JS. процентов 5% максимум.

1 лайк