Как инициализировать переменную множество раз в js?

Question

[Danya Wyse]

Есть скрипт, который при отправлении сообщения добавляет маркер с датой написания сообщения, но он срабатывает только один раз.
Через querySelectorAll не получается

let logMessage = document.querySelector(".logtime");
let sendDate = new Date();
let sendMinuts = (sendDate.getMinutes() < 10 ? "0" : "") + sendDate.getMinutes();
let sendHours = sendDate.getHours();
let sendMessageDate = sendHours + ":" + sendMinuts;
logMessage.innerHTML = sendMessageDate;

Comments

[Вадим]

ничего не понятно, но очень интересно.
Сколько раз вызовете присваивание, столько раз оно и сработает.

let date = 1
console.log(date) // 1
date = 2
console.log(date) // 2

В чём проблема?

[Alex_mos]

Получение селекторов и вписывание в них даты, мне кажется не подходит. Вам нужно указывать дату в момент отправки сообщения.
А так используя querySelector или querySelectorАll вы будете просто одно время встраивать во все элементы.

Если вы этого хотите.
Если сообщения создаются динамический)

[Danya Wyse]

Вадим, что тут непонятного
мне нужно чтобы отрисовывалось время, когда было отправлено сообщение
1 сообщение в 20:15
2 сообщение в 20: 22
и так далее
У меня выводит только первое сообщение и все

[Вадим]

Danya Wyse, ну давайте я у вас спрошу - что в js может быть непонятного? Далеко мы так продвинемся? Вы задаёте вопрос. Прямой ответ на который - бред. Соответственно вопрос требует более подробного описания.

[Вадим]

Danya Wyse, заверните код в функцию и вызывайте. Сколько раз вызовете столько и исполнится. Только не забудьте что вы html перетираете полностью через innerHtml. И соответственно пишите всегда в один и тот же первый в разметке .logtime

[Danya Wyse]

Вадим,
Я тогда по другому вопрос поставлю
Как мне выводить элемент с временем, которое будет означать отправку сообщения ?
Я сделал такую функцию timeMark
https://iwyse.github.io/ChatBot/
Но выводится время только один раз.

вот весь скрипт чата

const showDate = document.getElementById("showDate");
const firstMessage = document.getElementById("firstMessage");
setTimeout(() => {
  firstMessage.style.display = "flex";
  showDate.style.display = "block";
}, 3000);

const printDate = document.getElementById("todayDate");
const spendTime = document.getElementById("spendTime");

function printDay(todayHours) {
  if (todayHours >= 6 && todayHours < 12) {
    return "утра";
  } else if (todayHours >= 12 && todayHours < 18) {
    return "дня";
  } else if (todayHours >= 18 && todayHours <= 23) {
    return "вечера";
  } else {
    return "ночи";
  }
}
function spendMyTime(todayHours) {
  if (todayHours >= 6 && todayHours < 12) {
    return "утро";
  } else if (todayHours >= 12 && todayHours < 18) {
    return "день";
  } else if (todayHours >= 18 && todayHours <= 23) {
    return "вечер";
  } else {
    return "ночь";
  }
}

//* вывод текущего времени (часы + минуты)
let todayDate = new Date();
let todayMinuts = (todayDate.getMinutes() < 10 ? "0" : "") + todayDate.getMinutes();
let todayHours = todayDate.getHours();
let todayDateNow = todayHours + ":" + todayMinuts + " " + printDay(todayHours);
printDate.innerHTML = todayDateNow;
spendTime.innerHTML = spendMyTime(todayHours);


//* Функционал чата
const chatWrapper = document.querySelector(".chat__wrapper");
const sendMessage = document.querySelector(".send-message");
let inputMessage = document.querySelector(".input-message");


sendMessage.addEventListener("click", function (e) {
  if (inputMessage.value == 0) {
    e.preventDefault();
  }
  chatWrapper.insertAdjacentHTML(
    "beforeend",
    '<div class="chat-user chat-body"><div class="chat-user__image"><img src="img/person2.png" alt=""></div><div class="chat-user__message chat-message"><p class="chat-user__text">' +
      inputMessage.value +
      '</p><div class="chat-user__time chat-time logtime like-counter"></div></div></div>'
  );
  timeMark();
  presetLoading(); //* вызов эмуляции записи сообщения

  setTimeout(() => {
    let message;
    if (inputMessage.value.toLowerCase() == "привет, смотрю сериал") {
      message = `Здорово, я вот жду 3 сезон сериала "видеть"`;
    } 
    else if (inputMessage.value.toLowerCase() == "как твои дела?") {
      message = "Недавно ходили на море, тебе нравится море?";
    } 
    else if (inputMessage.value.toLowerCase() == "нравится море, люблю плавать") {
      message = "Вода щас очень теплая, людей правда много";
    }
    else if (inputMessage.value.toLowerCase() == "не фанат ходить на море") {
      message = "А мне нравится";
    }
    else if (inputMessage.value.toLowerCase() == "что у тебя нового?") {
      message = "Неделю назад приобрел машину";
    }
    else if (inputMessage.value.toLowerCase() == "что за машина?") {
      message = "Toyota Soarer, люблю быстро ездить";
    }
    else if (inputMessage.value.toLowerCase() == "главное ездить с умом") {
      message = "Обязательно";
    }
    else if (inputMessage.value == "") {
      message = "Не вижу что написано";
    }
    else {
      message = "Прости, появились срочные дела. До встречи!";
    }
    chatWrapper.insertAdjacentHTML(
      "beforeend",
      '<div class="chat-bot chat-body"><div class="chat-bot__image"><img src="img/person1.png" alt=""></div><div class="chat-bot__message chat-message"><p class="chat-bot__text">' +
        message +
        '</p><div class="chat-bot__time chat-time logtime"></div></div></div>'
    );
  }, 1500);
});

//* Эмуляция набора сообщения от собеседника
let loadingChat = document.createElement("div");
loadingChat.className = "chat-bot chat-body chat-loading";
loadingChat.innerHTML =
  '<div class="chat-bot__image"><img src="img/person1.png" alt=""></div><div class="chat-bot__loading chat-message"><span class="loading loading-1"></span><span class="loading loading-2"></span><span class="loading loading-3"></span></div>';
function presetLoading() {
  chatWrapper.append(loadingChat);
  setTimeout(() => {
    loadingChat.remove();
  }, 1500);
}


//* Вывод временной точки
function timeMark() {
  let logMessage = document.querySelector(".logtime");
  let sendDate = new Date();
  let sendMinuts = (sendDate.getMinutes() < 10 ? "0" : "") + sendDate.getMinutes();
  let sendHours = sendDate.getHours();
  let sendMessageDate = sendHours + ":" + sendMinuts;
  logMessage.innerHTML = sendMessageDate;
}
timeMark();

[Вадим]

Danya Wyse,

chatWrapper.insertAdjacentHTML(
    "beforeend",
    '<div class="chat-user chat-body"><div class="chat-user__image"><img src="img/person2.png" alt=""></div><div class="chat-user__message chat-message"><p class="chat-user__text">' +
      inputMessage.value +
      '</p><div class="chat-user__time chat-time logtime like-counter"></div></div></div>'
  );
  timeMark();

Когда Вы тут Вызываете timeMak он вставляет вам данные в самый первый в разметке элемент с классом .logtime. А не тот который Вы выше вставили черрез insertAdjacentHTML из-за того что у Вас documentQuerySelector - находит первый в разметке элемент. А он уже есть в самом первом сообщении.
Почему бы в Вашем случае сразу в insertAdjacentHTML не добавлять время?

[Danya Wyse]

Вадим,ну я пытался его добавить классом logtime. По другому пока не вдуплил.

[Вадим]

Danya Wyse, так а зачем при создании нового элемента вы делаете запись в существующий? Пишите сразу в новосозданный

[Danya Wyse]

Вадим, вы имеете ввиду что я постоянно пересоздаю переменную logtime?

[Вадим]

Danya Wyse, а у вас что, есть такая переменная? Я говорю про весь html элемент. Почему то вы через insert вставляете новые дивы, новую картинку, а дату там же почему то не вставляете. Вместо этого идёте в уже имеющийся блок и заменяете в нем.

[Danya Wyse]

Вадим, можете пока не отвечать, до меня дошло

[Danya Wyse]

Вадим,
https://iwyse.github.io/ChatBot/
Вы мне очень помогли, спасибо.
теперь время работает.
Я не в ту сторону копал, думал как мне селектор раздуплить. А все оказалось намного проще
Я при клике создаю новую дату.
В коде идет дублирование, со временем и это оптимизирую. Главное функционал заработал так как я хотел.
а то мне всякие сокеты советовали.

sendMessage.addEventListener("click", function (e) {
  let logMessage;
  let sendDate = new Date();
  let sendMinuts = (sendDate.getMinutes() < 10 ? "0" : "") + sendDate.getMinutes();
  let sendHours = sendDate.getHours();
  let sendMessageDate = sendHours + ":" + sendMinuts;
  logMessage = sendMessageDate;
  chatWrapper.insertAdjacentHTML(
    "beforeend",
    '<div class="chat-user chat-body"><div class="chat-user__image"><img src="img/person2.png" alt=""></div><div class="chat-user__message chat-message"><p class="chat-user__text">' +
      inputMessage.value +
      '</p><div class="chat-user__time chat-time">'+logMessage+'</div></div></div>'
  );

Фразы для чата:
привет, смотрю сериал
как твои дела?
что у тебя нового?

[Вадим]

Danya Wyse, напишите тогда что вы сделали для решения в ответы к вопросу и отметьте решением, чтобы другие пользователи сервиса знали что тут уже не нужно помогать

Answer 1

[Danya Wyse]

При клике создаю новую дату.

sendMessage.addEventListener("click", function (e) {
  let logMessage;
  let sendDate = new Date();
  let sendMinuts = (sendDate.getMinutes() < 10 ? "0" : "") + sendDate.getMinutes();
  let sendHours = sendDate.getHours();
  let sendMessageDate = sendHours + ":" + sendMinuts;
  logMessage = sendMessageDate;
  chatWrapper.insertAdjacentHTML(
    "beforeend",
    '<div class="chat-user chat-body"><div class="chat-user__image"><img src="img/person2.png" alt=""></div><div class="chat-user__message chat-message"><p class="chat-user__text">' +
      inputMessage.value +
      '</p><div class="chat-user__time chat-time">'+logMessage+'</div></div></div>'
  );

Answer 2

[Nik Faraday]

Просто присвойте переменной новое значение ещё раз. Но это если брать чисто ответ на ваш вопрос. Судя из контекста, тут нельзя обойтись одной переменной, т.к. данные об отправке сообщений должны храниться в базе данных, т.е, там будет не одна переменная для все сообщений, для каждого сообщения будет своя перемення с временем отправки. А вообще, используйте классы, точнее, создайте класс сообщения, что бы для каждого сообщения было своё время