Ошибкa отображения [объект HTMLParagraphElement] в JavaScript

Я новичок в javascript, у меня ошибка, из-за которой отображается [object HTMLParagraphElement] вместо содержимого чата в функции реального времени.

<script>
 // Настройка Pusher
 Pusher.logToConsole = true;
 var pusher = new Pusher('...', {
     cluster: '...',
     encrypted: true
 });

 // Замените на реальные ID отправителя и получателя
 var senderId = 1;
 var receiverId = 2;

 // Подписка на приватный канал для получателя
 var channel = pusher.subscribe(`private-chat-${receiverId}`);
 channel.bind('new_message', function (data) {
     var messageHistory = document.getElementById('message-history');
     var message = document.createElement('div');
     message.className = `message ${data.senderId === senderId ? 'sent' : 'received'}`;

     // Создание и установка содержимого сообщения
     var messageContent = document.createElement('p');
     // Убедитесь, что data.message - это строка, прежде чем присваивать textContent
     messageContent.textContent = `${String(data.message)} (Отправлено в ${data.sentAt})`;

     message.appendChild(messageContent);
     messageHistory.appendChild(message);
     messageHistory.scrollTop = messageHistory.scrollHeight; // Прокрутка вниз
 });

 // Загрузка истории сообщений при загрузке страницы
 document.addEventListener('DOMContentLoaded', function () {
     fetch(`/history/${senderId}/${receiverId}`)
         .then(response => response.json())
         .then(messages => {
             var messageHistory = document.getElementById('message-history');
             messages.forEach(message => {
                 var msgDiv = document.createElement('div');
                 msgDiv.className = `message ${message.senderId === senderId ? 'sent' : 'received'}`;

                 // Создание и установка содержимого сообщения
                 var msgContent = document.createElement('p');
                 // Убедитесь, что message.messageContent - это строка, прежде чем присваивать textContent
                 msgContent.textContent = `${String(message.messageContent)} (Отправлено в ${new Date(message.sentAt).toLocaleString()})`;

                 msgDiv.appendChild(msgContent);
                 messageHistory.appendChild(msgDiv);
             });
             messageHistory.scrollTop = messageHistory.scrollHeight; // Прокрутка вниз
         })
         .catch(error => console.error('Ошибка загрузки истории сообщений:', error));
 });

 // Обработка отправки сообщений
 document.getElementById('send-button').addEventListener('click', function () {
     var messageContent = document.getElementById('message-input').value;

     fetch('/send', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
         },
         body: JSON.stringify({
             senderId: senderId,
             receiverId: receiverId,
             messageContent: messageContent
         })
     })
         .then(response => response.json())
         .then(data => {
             console.log(data);

             // Непосредственно отображение отправленного сообщения в истории чата
             var messageHistory = document.getElementById('message-history');
             var message = document.createElement('div');
             message.className="message sent";

             // Создание и установка содержимого сообщения
             var messageContent = document.createElement('p');
             // Убедитесь, что messageContent - это строка, прежде чем присваивать textContent
             messageContent.textContent = `${String(messageContent)} (Отправлено в ${new Date().toLocaleString()})`;

             message.appendChild(messageContent);
             messageHistory.appendChild(message);
             messageHistory.scrollTop = messageHistory.scrollHeight; // Прокрутка вниз

             // Очистка поля ввода
             document.getElementById('message-input').value="";
         })
         .catch(error => console.error('Ошибка:', error));
 });
</script>

Я пробовал использовать innerHTML, но это все равно не работает

Ответ

Проблема, с которой вы столкнулись, связана с тем, что вы пытаетесь вывести объект HTML (в данном случае элемент <p>) напрямую в качестве текстового содержимого, что приводит к отображению [object HTMLParagraphElement]. Это может произойти, если вы неправильно используете переменные для хранения содержимого сообщения.

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

Вот несколько шагов, чтобы гарантировать, что ваша функция работает правильно:

Проверьте, что вы используете правильные переменные: Убедитесь, что переменная для текстового содержимого сообщения не конфликты с переменной элемента.
Используйте правильные имена переменных: В вашем коде вы используете одну и ту же переменную messageContent для определения элемента и хранения строки сообщения. Чтобы избежать путаницы, переименуйте одну из них.

Вот исправленный код:

<script>
 // Настройка Pusher
 Pusher.logToConsole = true;
 var pusher = new Pusher('...', {
     cluster: '...',
     encrypted: true
 });

 // Замените на фактические ID отправителя и получателя
 var senderId = 1;
 var receiverId = 2;

 // Подписка на приватный канал получателя
 var channel = pusher.subscribe(`private-chat-${receiverId}`);
 channel.bind('new_message', function (data) {
     var messageHistory = document.getElementById('message-history');
     var message = document.createElement('div');
     message.className = `message ${data.senderId === senderId ? 'sent' : 'received'}`;

     // Создаем и задаем содержание сообщения
     var messageText = document.createElement('p');
     // Убедитесь, что data.message является строкой перед присвоением textContent
     messageText.textContent = `${String(data.message)} (Отправлено в ${data.sentAt})`;

     message.appendChild(messageText);
     messageHistory.appendChild(message);
     messageHistory.scrollTop = messageHistory.scrollHeight; // Прокрутка вниз
 });

 // Загрузка истории сообщений при загрузке страницы
 document.addEventListener('DOMContentLoaded', function () {
     fetch(`/history/${senderId}/${receiverId}`)
         .then(response => response.json())
         .then(messages => {
             var messageHistory = document.getElementById('message-history');
             messages.forEach(msg => {
                 var msgDiv = document.createElement('div');
                 msgDiv.className = `message ${msg.senderId === senderId ? 'sent' : 'received'}`;

                 // Создаем и задаем содержание сообщения
                 var msgText = document.createElement('p');
                 // Убедитесь, что msg.messageContent является строкой перед присвоением textContent
                 msgText.textContent = `${String(msg.messageContent)} (Отправлено в ${new Date(msg.sentAt).toLocaleString()})`;

                 msgDiv.appendChild(msgText);
                 messageHistory.appendChild(msgDiv);
             });
             messageHistory.scrollTop = messageHistory.scrollHeight; // Прокрутка вниз
         })
         .catch(error => console.error('Ошибка при загрузке истории сообщений:', error));
 });

 // Обработка отправки сообщений
 document.getElementById('send-button').addEventListener('click', function () {
     var inputMessageContent = document.getElementById('message-input').value;

     fetch('/send', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
         },
         body: JSON.stringify({
             senderId: senderId,
             receiverId: receiverId,
             messageContent: inputMessageContent
         })
     })
         .then(response => response.json())
         .then(data => {
             console.log(data);

             // Сразу отображаем отправленное сообщение в истории чата
             var messageHistory = document.getElementById('message-history');
             var message = document.createElement('div');
             message.className = "message sent";

             // Создаем и задаем содержание сообщения
             var sentMsgText = document.createElement('p');
             // Убедитесь, что inputMessageContent является строкой перед присвоением textContent
             sentMsgText.textContent = `${String(inputMessageContent)} (Отправлено в ${new Date().toLocaleString()})`;

             message.appendChild(sentMsgText);
             messageHistory.appendChild(message);
             messageHistory.scrollTop = messageHistory.scrollHeight; // Прокрутка вниз

             // Очищаем поле ввода
             document.getElementById('message-input').value = "";
         })
         .catch(error => console.error('Ошибка:', error));
 });
</script>

Что было изменено:

Имя переменной для текстового содержания сообщения было изменено с messageContent на messageText в коде обработки входящих сообщений.
Добавлено новое имя переменной inputMessageContent для содержимого отправляемого сообщения, чтобы избежать путаницы.

Эти изменения помогут вам избежать конфликта переменных и гарантировать, что текстовые сообщения отображаются правильно, без ошибок вроде [object HTMLParagraphElement].