如何制作一个在 bootstrap 和 js 中切换背景颜色的单选按钮？

Question

我想制作一个想法笔记，例如公告板，以使用 bootstrap 和 Javascript。因此，我创建一个输入组，包括发送按钮、输入或单击消息添加，就像堆栈一样。但我不知道如何在 onclick 时使用两个同时设置背景颜色和发送消息的功能。在单选按钮中，当我选中按钮时，我可以更改引导程序中的颜色代码吗？

切换卡头背景颜色粉色或灰色的单选按钮可以在检查颜色并输入消息时更改卡头颜色。根据选中的单选按钮，按下消息的标题部分的颜色必须更改。

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

我会委托

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>