Идея однопользовательского Javascript чата

Question

Как можно сделать так, чтобы при каждом клике создавался новый div, т.е. как обычный чат работал. Я написал такой код, но идея так себе, пробовал и с createElement, но что-то не вышло.

document.querySelector(".btn").onclick = send;
    
function send(){
   if(document.querySelector(".text").value !== "")
        document.querySelector(".color").style.display = "block"
        
   document.querySelector(".color").innerHTML =  document.querySelector(".text").value
      
}

.content{
  width:230px;
  height:200px;
  background-color:silver;
  position:relative;
}
.flex{
  position:absolute;
  bottom:0px;
  display:flex;
  justify-content:flex-end;
  width:100%;
}
.output{
  width:100%;
  height:90%;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
}
.color{
  background-color:blue;
  border-radius:5px;
  color:white;
  padding:10px;
  display:none;
}

<div class = "content">
      <div class = "output"><div class = "color">asd</div></div>
      <div class = "flex"><input type = "text" class = "text"><button class = "btn">SEND</button></div>
    </div>

Answer 1

В общем, это делают вот так:

// Ищем элементы
const output = document.querySelector('.output');
const button = document.querySelector('.btn');
const input  = document.querySelector('.text');

function send() {
  if(input.value === "") return; // Выходим из функции, если отправлять нечего

  let newMessage = document.createElement('div'); // Создаём новый <div>. На странице его ещё нет
  newMessage.classList.add('color'); // Присваиваем ему класс сообщения
  newMessage.textContent = input.value; // Вставляем туда текст
                                        // Не innerHTML, так как через него можно вставить скрипты
  output.appendChild(newMessage); // Добавляем сообщение в HTML
}

button.addEventListener('click', send); // Так лучше добавлять события

БЛОГ НА HUSL

Идея однопользовательского Javascript чата

Ответы (1 шт):