Как изменить текст элемента <p class="date">02.15.2023 20:00</p>
. А именно при нажатие на img
текст элемента p
появляется в поле input
где мы можем его отредактировать и после этого при нажатие на кнопку <button class="send" id="send">Отправить</button>
, отредактированный текст заменяет текст в элементе <p class="date">02.15.2023 20:00</p>.
При этом нужно учитывать то что на странице может быть ни одно такое сообщения а несколько
const mainBlock = document.getElementById('chatWrapper');
mainBlock.addEventListener('click', (event) => {
const input = document.getElementById('input');
if (event.target.tagName === 'IMG') {
const message = event.target.closest('.message_container').querySelector('.text').textContent;
input.value = message;
}
if (event.target.id === 'send') {
}
});
*{
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 class="chatContainer right">
<div class="message user">
<div class="message_box">
<p class="username">
Дмитрий
</p>
<p class="date">02.15.2023 20:00</p>
</div>
<div class="message_container">
<p>Привет давай я раскажу про чат.</p>
</div>
</div>
</div>
</div>
<div class="footerChat">
<label for="input"></label>
<input type="text" id="input">
<button class="send" id="send">Отправить</button>
</div>
</div>