Добавление класса элементу при клонировании из template и возникновении события. Vanilla JS

Question

Всем привет. Помогите разобраться. Есть две радиокнопки с выбором "темы". Есть форма с инпутом и кнопкой для добавления поста пользователем. Есть темплейт с разметкой поста. Нужно чтобы посты публиковались с добавленным классом темы (если она выбрана). Если на странице уже есть посты, к ним тоже должна применяться выбранная тема. В итоге, сообщения добавляются, но тема к ним не применяется. Не могу понять как это сделать (чтоб класс с нужными стилями добавлялся к новым сообщениям, и к тем которые уже есть на странице). Постарался подробно описать в коде ход своих мыслей.

// Достаем контент из темплэйта
const template = document.querySelector('.template').content;

// Объявляем переменную и клонируем в нее содержимое темплейта
// (это будет карточка с постом)
const messageCard = template.querySelector('.message-card').cloneNode(true);

// Находим в карточке с сообщением имя отправителя 
// (к нему должна применяться тема)
const userName = messageCard.querySelector('.username');


// находим радиокнопки с выбором темы
const radioRed = document.querySelector('.radio-red');
const radioBlue = document.querySelector('.radio-blue');


//отслеживаем клик по радиокнопкам
// добавляем или удаляем класс имени отправителя
// и соответственно меняем его цвет   
radioRed.addEventListener('click', () => {
  userName.classList.add('red');
});

radioBlue.addEventListener('click', () => {
  userName.classList.remove('red');
});

// Находим кнопку send
const sendButton = document.querySelector('.send-button');

// Отслеживаем клик
sendButton.addEventListener('click', () => {

  // По клику клонируем содержимое шаблона 
  const messageCard = template.querySelector('.message-card').cloneNode(true);

  //Это текст сообщения
  //Будем вставлять в него содержимое инпута
  const userText = messageCard.querySelector('.usertext');
  const messageInput = document.querySelector('.message-input');

  // Форма с инпутом и кнопкой сенд
  // Нужна чтобы вставлять под ней сообщения
  const messageForm = document.querySelector('.message-form')

  // Вставляем в сообщение текст из инпута
  userText.textContent = messageInput.value;

  // Вставляем карточку с сообщением под формой
  messageForm.after(messageCard);

  // Очищаем инпут
  messageInput.value = '';
});

.username {
  color: blue;
}

.username.red {
  color: red;
}

<form>
  <label for="blue">blue theme</label>
  <input class="radio-blue" type="radio" id="blue" name="color" checked>
  <input class="radio-red" type="radio" id="red" name="color">
  <label for="red">red theme</label>
</form>
<form class="message-form">
  <input class=message-input type="text">
  <button class="send-button" type="button">send</button>
</form>
<template class=template>
  <div class=message-card>
    <h3 class="username">name</h3>
    <p class="usertext"></p>
  </div>
</template>

БЛОГ НА HUSL

Добавление класса элементу при клонировании из template и возникновении события. Vanilla JS

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