0

Как получить текст тега <p class="text">Привет, я первый раз в этом чате.</p> в консоль, при нажатие на элемент img. Учитывая то что таких сообщений может быть множество.

Полный код

const mainBlock = document.getElementById('chatWrapper');
mainBlock.addEventListener('click', (event) => {
    if (event.target.tagName === 'IMG') {
        const message = event.target.closest('.text').textContent;
        console.log(message);
    }
});
*{
    font-family: sans-serif;
    margin: 0;
}
button {
    cursor: pointer;
}

.chat_wrapper {
    width: 600px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-flow: column nowrap;
    border: 1px solid lightgreen;
    border-radius: 15px;
    padding: 15px;
}


.footerChat {
    margin: 10px;
    display: flex;
    justify-content: center;
}

.footerChat > input {
    width: 75%;
    border: 1px solid lightblue;
    font-size: 16px;
    font-weight: 400;
    transition: all .5s ease-in;
}

.footerChat > input:hover {
    border: 1px solid lightseagreen;
    transition: all .5s ease-out;
    padding: 10px;
}

.footerChat > button {
    border: none;
    background: lightseagreen;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

.footerChat > button {
    border: none;
    background: lightseagreen;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

.footerChat > button:hover {
    background-color: lightblue;
    transition: all .5s ease-out;
}

.chat {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

.left {
    align-self: flex-start;
}

.right {
    align-self: flex-end;
}

.message {
    background: lightgreen;
    padding: 15px 15px;
    border-radius: 25px;
    border-radius-topleft: unset;
}

.message_box {
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    flex-flow: row nowrap;
    margin-bottom: 20px;
}

.date {
    font-size: 10px;
}

.username {
    font-weight: bold;
}
.settings-button {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
    align-self: flex-end;
}
.svg-settings {
    width: 20px;
    height: 20px;
}
.message_container {
    display: flex;
    flex-direction: column;

}
<div class="chat_wrapper" id="chatWrapper">
    <div class="chat">
        <div class="chatContainer left">
            <div class="message friend">
                <div class="message_box">
                    <p class="username">
                        Кирил
                    </p>
                    <p class="date">02.15.2023 20:00</p>
                </div>
                <div class="message_container">
                    <p class="text">Привет, я первый раз в этом чате.</p>
                    <button class="settings-button">
                        <img class="svg-settings" src="./settings.svg" alt="settings">
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

4
  • @ΝNL993 а что не так с вопросом ? Я конкретизировал вопрос, добавил код JS и полный код 25 фев в 18:46
  • С текстом всё прекрасно, вы молодец, а вот с кодом получилась беда. Полный код у вас выложен в CodePen, что не правильно, подробней почему, можно ознакомится по ссылке сверху. Сейчас добавьте минимальный код где я смогу увидеть хотя бы сам тег <p> с его классом (и другие компоненты которые обязательны для работы примера), чтобы можно было понять проблему и помочь вам.
    – ΝNL993
    25 фев в 18:48
  • 1
    @ΝNL993 исправил 25 фев в 19:03

1 ответ 1

1

Ваша ошибка в том, что взбираясь вверх к родителю, вы пытаетесь найти соседа. Чтобы было нагляднее, то правильно будет так:

const mainBlock = document.getElementById('chatWrapper');
mainBlock.addEventListener('click', (event) => {
    if (event.target.tagName === 'IMG') {
        const message = event.target.closest('.message_container').firstElementChild.textContent;
        console.log(message);
    }
});

Теперь мы сначала выбрали реального родителя .message_container а потом уже обращаемся к его первому детёнышу .firstElementChild, но при желании можете вместо него сделать выборку по селектору .querySelector('.text'). Можно и по другому выбрать, но набросал для наглядности того, где у вас ошибка.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.