Не могу понять почему в вашем коде когда пытаюсь посмотреть в console.log количество созданных сообщений в DOM console.log (messages.length) то все время выдает 0, хотя сообщения я добавляю.
аналогично почему то в цикле console.log (messages[i]) вообще ничего не выдает при добавлении и удалении сообщений.
В связи с чем это происходит и как работать с отладчиком в таком случае ?
Привет всем! Сделал так: скопировал весь код с предыдущего урока, удалил лишнее, заменил нужное на свое и по проверкам визуально все норм, но проверку не проходит. Подскажите, что именно не проходит проверку??? Заранее благодарю.
var list = document.querySelector(’.chat-content’);
var items = list.children;
var newItemForm = document.querySelector(’.chat-form’);
var newItemTitle = newItemForm.querySelector(’.chat-form-input’);
var messageTemplate = document.querySelector(’#message-template’).content;
var newItemTemplate = messageTemplate.querySelector(’.chat-message’);
var addCheckHandler = function (item) {
var chatbox = item.querySelector(’.chat-message-button’);
chatbox.addEventListener(‘click’, function () {
item.remove();
});
};
for (var i = 0; i < items.length; i++) {
addCheckHandler(items[i]);
}
newItemForm.addEventListener(‘submit’, function (evt) {
evt.preventDefault();
var taskText = newItemTitle.value;
var task = newItemTemplate.cloneNode(true);
var taskDescription = task.querySelector(‘p’);
taskDescription.textContent = taskText;
addCheckHandler (task);
list.appendChild(task);
});
В коде не хватает действия над одним из элементов чата для прохождения тестов. Визуальные различия есть.
Ребята, здравствуйте. Может кто-нибудь объяснить, почему мы код для удаления сообщений из коллекции пишем в функции обработчика события формы? Я думал, что это абсолютно два разных события, которые не должны зависеть друг от друга
Приветствую. Скажите, почему вызов фукнции удаления сообщения вы поместили именно в обрабобтчик событий отправки формы? Почему не вывести его отдельно, ведь какая связь с тем, что пользователь нажал “отправить”, и удаление, возможно, вообще другого сообщения?
почему другого-то?
вы сабмитом создаете новое сообщение и крестик в нем и соответственно обработчик удаления именно этого сообщения по крестику.
Мое решение:
// Контейнер для новых сообщений
var chat = document.querySelector(’.chat-content’);
// Форма
var form = document.querySelector(’.chat-form’);
// Инпут формы
var formInput = form.querySelector(’.chat-form-input’);
// Находим шаблон по id и получим его содержимое через свойство content
var messageTemplat = document.querySelector(’#message-template’).content;
// Находим в этом содержимом нужный элемент
var newMessageTemplat = messageTemplat.querySelector(’.chat-message’);
// Обработчик клика по кнопке отправки
form.addEventListener(‘submit’, function(evt) {
// Предотвращение действий по умолчанию(отправка формы)
evt.preventDefault();
// Текст из поля ввода(значение input-а)
var messageText = formInput.value;
// Сколонируем элементы из содержимого шаблона
var message = newMessageTemplat.cloneNode(true);
//в эл-те-клоне найдём элемент, в котором указывается текст сообщения
var messageDescription = message.querySelector(‘p’);
// заменим этому элементу textContent на название, введённое в поле ввода
messageDescription.textContent = messageText;
// Вставляем в конец контейнера подготовленный клон
chat.appendChild(message);
// Очищаем поле ввода формы
formInput.value = “”;
// Обработчик клика по кнопке удаления сообщения
//в эл-те-клоне найдём кнопку удаления сообщения
var delButton = message.querySelector(’.chat-message-button’);
delButton.addEventListener(‘click’, function () {
message.remove();
});
});
Мой кот 
let template = document.querySelector('#message-template').content
let messageTemplate = template.querySelector('.chat-message')
let sendForm = document.querySelector('.chat-form')
let inputField = sendForm.querySelector('.chat-form-input')
let chatContent = document.querySelector('.chat-content')
let sendButtonHandler = function () {
sendForm.addEventListener('submit', function (evt) {
if (inputField.value) {
evt.preventDefault()
let newMessage = messageTemplate.cloneNode(true)
let newMessageText = newMessage.querySelector('.chat-message-text')
let deleteButton = newMessage.querySelector('.chat-message-button')
deleteButton.addEventListener('click', function () {
newMessage.remove() })
newMessageText.textContent = inputField.value
chatContent.appendChild(newMessage)
inputField.value = ''
}})
}
sendButtonHandler()
Ребята помогите! Не могу понять почему так происходит. Во вложении скриншот. В консоль вывожу сначала контент темплейта, а потом найденный в нем див с классом. Но почему то он записывается туда уже вложенный в такой же див. И поэтому у меня не ищет в нем кнопку и не работает закрытие сообщений. Уже миллион раз проверил всю пунктуацию и синтаксис. Скопировал аналогичные решения у других людей. У них все работает у меня почему то нет. Что я делаю не так?
выложи код текстом пожалуйста)
Мой код:
var template = document.querySelector('#message-template').content;
var messageTemplate = template.querySelector(".chat-message");
var parent = document.querySelector(".chat-content");
var messages = parent.children;
var submissionForm = document.querySelector(".chat-form");
var inputForm = document.querySelector(".chat-form-input");
var sendButton = document.querySelector(".chat-form-button");
submissionForm.addEventListener (“submit”, function (evt) {
evt.preventDefault();
var newMessageElement = messageTemplate.cloneNode(true);
var newMessageContent = newMessageElement.querySelector(".chat-message-text");
newMessageContent.textContent = inputForm.value;
parent.appendChild(newMessageElement);
inputForm.value ="";
removeMessage (newMessageElement)
})
var removeMessage = function (messages) {
var removeButton = messages.querySelector(".chat-message-button");
removeButton.addEventListener (“click”, function () {
messages.remove ();
})
}
for (var i=0; i<messages.length; i++) {
removeMessage(messages[i])
}
Добавлю свои пять копеек, вдруг кому пригодиться
//находим элемент-родитель
var parrentDiv = document.querySelector('.chat-content')
//получаем все дочерние элементы родительского списка в виде коллекции элментов
var collectionOfMessages = parrentDiv.children
//находим скрытый заголовок с надписью чат
var chatTitle = document.querySelector('.visually-hidden')
//находим форму отправки нового сообщения
var messageForm = document.querySelector('.chat-form')
//находим поле ввода пользовательского сообщения
var userText = messageForm.querySelector('.chat-form-input')
//находим содержимое шаблона темплейта
var templateOfMessage = document.querySelector('#message-template').content;
//находим див в котором будет отображаться наше сообщение
var windowOfmessage = templateOfMessage.querySelector('.chat-message')
var removeMessage = function (item) {//создаем функцию которая работает на удаление текущего сообщения
var buttonDelete = item.querySelector('.chat-message-button')
buttonDelete.addEventListener('click', function () {
item.remove();
});
};
messageForm.addEventListener('submit', function (evt){
evt.preventDefault();
var textFromUser = userText.value
var makeMessage = windowOfmessage.cloneNode(true)
var chatMessage = makeMessage.querySelector('.chat-message-text')
chatMessage.textContent = textFromUser
parrentDiv.appendChild(makeMessage)
userText.value = ''
removeMessage(makeMessage)
})Не могли бы подсказать, почему сообщения не удаляются. Вернее удаляются, но только если кликнешь на самое первое и удаляются сразу все.
Код:
// Добираемся до стены с сообщениями
let chatContent = document.querySelector (’.chat-content’) ;
let chatMessages = chatContent.children ;
// Добираемся до элементов формы
let chatForm = document.querySelector (’.chat-form’) ;
let input = document.querySelector (’.chat-form-input’) ;
// Добираемся до шаблона сообщения
let template = document.querySelector (’#message-template’).content ;
let itemTemplate = template.querySelector (’.chat-message’) ;
let deleteMessage = function (message) {
let delButton = document.querySelector (’.chat-message-button’) ;
delButton.addEventListener (‘click’, function () {
message.remove () ;
})
}
chatForm.addEventListener (‘submit’, function (evt) {
evt.preventDefault () ;
let clonedElement = itemTemplate.cloneNode (true) ;
let clonedElementText = clonedElement.querySelector (’.chat-message-text’) ;
clonedElementText.textContent = input.value ;
chatContent.append (clonedElement) ;
deleteMessage (clonedElement) ;
input.value = ‘’ ;
})
В переменной delButton вместо document.querySelector
Напиши message.querySelector , если уж пишешь на js юзай все переменные, зачем тут тебе нужна: let chatMessages = chatContent.children ; ? - Ты её нигде не используешь
const chatContent = document.querySelector('.chat-content');
// Добираемся до элементов формы
const chatForm = document.querySelector('.chat-form');
const input = document.querySelector('.chat-form-input');
// Добираемся до шаблона сообщения
const template = document.querySelector('#message-template').content;
const itemTemplate = template.querySelector('.chat-message');
function deleteMessage(message) {
const delButton = message.querySelector('.chat-message-button');
delButton.addEventListener('click', () => {
message.remove();
});
}
chatForm.addEventListener('submit', (evt) => {
evt.preventDefault();
const clonedElement = itemTemplate.cloneNode(true);
const clonedElementText = clonedElement.querySelector('.chat-message-text');
clonedElementText.textContent = input.value;
chatContent.append(clonedElement);
deleteMessage(clonedElement);
input.value = '';
});
Также хочу отметить что нейминг переменных очень неудачен, попробуй именовать в соответствии с dom
Спасибо, и правда заработало. Только я не понял, почему первоначальный вариант не работал. Ведь что через document обращайся, что через message - это одно и то же, просто через message более экономно. Разве нет?
Насколько я понял это работает от замыкания функции, как будем делать document.querySelector , если допустим 2 сообщения? - вот он и находит 1 элемент на странице и удаляет по нему всё разом, а тут он уже от параметра танцует, какое сообщение в параметре передали - то и удаляем
спасибо
let template = document.querySelector('#message-template').content;
let templateBlock = template.querySelector('.chat-message');
let messagesList = document.querySelector('.chat-content');
let messageSubmit = document.querySelector('.chat-form');
let messageInput = document.querySelector('.chat-form-input');
let removeMessage = function (message) {
let deleteButton = message.querySelector('.chat-message-button');
deleteButton.addEventListener('click', function () {
message.remove();
});
}
messageSubmit.addEventListener('submit', function (evt){
evt.preventDefault();
let newMesageBlock = templateBlock.cloneNode(true);
let newMessageText = newMesageBlock.querySelector('.chat-message-text')
newMessageText.textContent = messageInput.value;
messagesList.appendChild(newMesageBlock);
messageInput.value = '';
removeMessage(newMesageBlock);
});
Все работает, а тест не проходит - в чем проблема? 
const mainDiv = document.querySelector(".chat-content");
const text = document.querySelector(".chat-form-input");
const button = document.querySelector(".chat-form-button");
button.addEventListener("click", function(e) {
e.preventDefault();
const div = document.createElement("div");
div.classList.add("chat-message");
div.innerHTML = `
<span class="chat-message-name">Неопознанный енот</span>
<p class="chat-message-text">${text.value}</p>
<button class="chat-message-button" type="button">Удалить</button>`;
mainDiv.append(div);
text.value = "";
});
mainDiv.addEventListener("click", function(e) {
const target = event.target;
const parent = target.closest(".chat-message");
if (target.className != "chat-message-button") {
return;
} else {
parent.remove();
}
});
Поясните пожалуйста, откуда у вас берется анонимная функция удаляющая сообщения?
Если функция классическая то ничего не срабатывает, но только сделав ее анонимной кнопка удаления определяется к своему сообщению, и все работает как следует. Почему так?