how to I make a radio button which switches background color in bootstrap and js?

Question

I'd like to make a idea note like bulletin board to use bootstrap and Javascript. So I make a input-group include send button, enter or click message add like a stack. But I don't know how to use when onclick two function which is setting background-color and send message at the same time. In radio button, when I check the button, Can I change the color code in bootstrap?

The radio button which switch card-header's background color Pink or Gray can change card-header's color when I checked color and enter the message. Depending on the checked radio button, the color of the header part where the message was pressed must be changed.

function addMessage() {
  const input = document.getElementById('messageInput');
  const messageText = input.value.trim();
  if (messageText !== '') {
    const messageHTML = `
<div class="card mb-3 shadow-sm">
  <div class="card-header bg-primary">
    <div class="text-muted">
      Posted by ${getCurrentUser()} at ${formatDateTime()}
    </div>
  </div>
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-top">
      <div class="flex-grow-1">
        <div class="message-text">${messageText}</div>
      </div>
      <button class="btn btn-danger btn-sm ms-2" onclick="this.closest('.card').remove()">Delete</button>
    </div>
  </div>
</div>`;

  }
}

<!-- Input group -->
<div class="d-flex justify-content mb-5">
  <div class="input-group">
    <input type="text" class="form-control" id="messageInput" placeholder="Text input">
    <button type="button" class="btn btn-primary" onclick='addMessage()'>Send</button>
  </div>
</div>

<div class="message-board" id="messageBoard"></div>

Answer 1

I would delegate

window.addEventListener('load', () => { // when page has loaded
  const input = document.getElementById('messageInput');
  const messageBoard = document.getElementById('messageBoard');

  const getCurrentUser = () => {
    return "User"; // Replace with your logic to fetch the current user
  };

  const formatDateTime = () => {
    const now = new Date();
    return `${now.toLocaleDateString()} ${now.toLocaleTimeString()}`;
  };

  const addMessage = () => {
    const messageText = input.value.trim();

    // Get selected color
    const selectedColor = document.querySelector('input[name="headerColor"]:checked').value;

    if (messageText !== '') {
      const messageHTML = `
<div class="card mb-3 shadow-sm">
  <div class="card-header ${selectedColor}">
    <div class="text-muted">
      Posted by ${getCurrentUser()} at ${formatDateTime()}
    </div>
  </div>
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-top">
      <div class="flex-grow-1">
        <div class="message-text">${messageText}</div>
      </div>
      <button class="btn btn-danger btn-sm ms-2 delete">Delete</button>
    </div>
  </div>
</div>`;
      messageBoard.insertAdjacentHTML('beforeend', messageHTML);
      input.value = ''; // Clear the input
    } else {
      alert('Please enter a message!');
    }
    input.focus();
    input.select();
  }
  messageBoard.addEventListener('click', (e) => {
    const tgt = e.target.closest('button.delete');
    if (!tgt) return;
    tgt.closest('.card').remove()
  })
  
  document.getElementById('send').addEventListener('click', addMessage);
  input.focus();
  input.select();
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<!-- Color Selection Radio Buttons -->
<div class="mb-3">
  <label class="form-label">Choose Header Color:</label>
  <div>
    <input type="radio" id="pink" name="headerColor" value="bg-danger" checked>
    <label for="pink">Pink</label>
    <input type="radio" id="gray" name="headerColor" value="bg-secondary">
    <label for="gray">Gray</label>
  </div>
</div>

<!-- Input group -->
<div class="d-flex justify-content mb-5">
  <div class="input-group">
    <input type="text" class="form-control" id="messageInput" placeholder="Text input">
    <button id="send" type="button" class="btn btn-primary">Send</button>
  </div>
</div>

<!-- Message Board -->
<div class="message-board" id="messageBoard"></div>