0

Как изменить текст элемента <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>

2 ответа 2

2

Можно вот так:

const mainBlock = document.getElementById('chatWrapper');
mainBlock.addEventListener('click', (event) => {
  const input = document.getElementById('input');
  if (event.target.tagName === 'IMG') {

    const message = event.target.parentElement.parentElement.children[0];
    input.value = message.textContent;
    message.setAttribute('id', 'text');
  }
  if (event.target.id === 'send') {
    const text = document.getElementById('text');
    text.textContent = input.value;
    text.removeAttribute('id');
    input.value = '';
  }
});
* {
  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>Привет, я первый раз в этом чате.</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>

2
  • скажите пожалуйста а как быть если таких сообщений может быть не одно а несколько на странице 26 фев в 7:36
  • @NANO_996, смотри мой вариант - там будет редактироваться только нужное сообщение. ;) Т.к. я его помечаю классом edit.
    – ksa
    26 фев в 9:01
1

А именно при нажатие на img текст элемента p появляется в поле input где мы можем его отредактировать и после этого при нажатие на кнопку Отправить, отредактированный текст заменяет текст в элементе 02.15.2023 20:00

Предложу такой вариант алгоритма...

const mainBlock = document.getElementById('chatWrapper');
const input = document.getElementById('input');
mainBlock.addEventListener('click', (event) => {
  const o = event.target
  // определяем редактируемый контейнер
  const op = o.closest('.chatContainer')
  if (o.tagName === 'IMG') {
    // убираем помеченные к редактированию контейнеры (если такие еще есть)
    mainBlock.querySelectorAll('.edit').forEach(o => o.classList.remove('edit'))
    // помечаем текущий как редактируемый
    op.classList.add('edit')
    // начинаем редактирование текста
    const message = op.querySelector('.text').textContent;
    input.value = message;
  }
  if (o.id === 'send') {
    if (input.value === '') return
    // определяем редактируемый блок
    const op = mainBlock.querySelector('.edit')
    // определяем дату и время изменения текста сообщения
    let d = (new Date()).toISOString().slice(0, 16)
    d = d.replace(/^(\d+)\-(\d+)\-(\d+)T/, '$3.$2.$1 ')
    // записываем дату и время редактирования
    op.querySelector('.date').textContent = d
    // обновляем текст сообщения
    op.querySelector('.text').textContent = input.value
    input.value = ''
    // снимаем отметку блока как редактируемого
    op.classList.remove('edit')
  }
});
* {
  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>

7
  • можешь пожалуйста если не затруднит к своему коду добавить комментарии что за что отвечает. А то я не совсем понимаю что за что отвечает 26 фев в 9:40
  • @NANO_996, я добавил комментарии.
    – ksa
    26 фев в 10:18
  • скажи пожалуйста не очень понимаю почему ты выбрал .chatContainer как редактируемый контейнер а не какой-то другой 26 фев в 13:16
  • @NANO_996, можно взять и .message... Просто я вижу только минимальную часть твоего html...
    – ksa
    26 фев в 13:20
  • то что я добавил в вопрос это весь html 26 фев в 13:25

Ваш ответ

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

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