如何使用JavaScript为待办列表添加任务并渲染Bootstrap卡片

你的代码存在3个核心错误导致功能不符合预期：

• 事件监听传参错误：addEventListener 的第二个参数要求传入函数引用，你写的 addCard({name:'juice'}) 是立即执行的函数调用，页面加载时就会执行一次addCard，点击按钮时没有可触发的回调，完全不会执行新增逻辑
• DOM ID重复：静态预置卡片和动态生成的卡片都使用了id="newCard"、id="time"，HTML规范要求同页面ID全局唯一，后续如果要做删除、编辑操作会直接定位到第一个匹配元素，导致功能失效
• 缺失核心逻辑：没有实现任务存入数组的逻辑，也没有读取表单输入框的值，一直使用硬编码的juice作为任务名

JavaScript 部分 #

// 存储所有待办任务的数组
const todoList = [];
const button = document.getElementById('clickMe');
const cardList = document.getElementById('cardList');
const nameFInput = document.getElementById('nameF');
const nameLInput = document.getElementById('nameL');
const errMsg = document.getElementById('msgErr');

// 绑定点击事件，用匿名函数包裹逻辑，避免页面加载时立即执行
button.addEventListener('click', () => {
  // 读取输入框值
  const taskName = nameFInput.value.trim();
  const assignTo = nameLInput.value.trim();
  // 简单非空校验
  if (!taskName) {
    errMsg.textContent = '任务名称不能为空';
    return;
  }
  errMsg.textContent = '';
  // 构造任务对象存入数组
  const newTask = {
    name: taskName,
    assignTo: assignTo,
    createTime: new Date().toLocaleString(),
    status: '待处理'
  };
  todoList.push(newTask);
  // 渲染卡片列表
  renderCards();
  // 清空输入框
  nameFInput.value = '';
  nameLInput.value = '';
});

// 统一渲染所有卡片的函数
function renderCards() {
  // 清空容器后遍历数组重新渲染，避免重复拼接导致的内容异常
  cardList.innerHTML = '';
  todoList.forEach((task, index) => {
    const cardBody = `
    <div class="card" data-task-id="${index}">
      <h5 class="card-header bg-warning">
        Task Card 
        <span class="time" style="padding-top:5px;float:right;font-size:0.8rem;">${task.createTime}</span>
      </h5>
      <div class="card-body">
        <p class="card-text">
          <strong>任务名：${task.name}</strong><br>
          指派给：${task.assignTo || '未指派'}<br>
          截止日期：待设置<br>
          状态：${task.status}<br>
          描述：待补充
        </p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">Edit</a>
        <a href="#" class="btn btn-secondary">Delete</a>
      </div>
    </div>
    `;
    cardList.innerHTML += cardBody;
  });
}

HTML 部分调整 #

原HTML中两个错误提示元素重复使用了id="msgErr"，需要修正，调整后参考如下：

<form>
  <input type="text" id="nameF" placeholder="输入任务名称">
  <span id="msgErr" style="color:red;"></span>
  <br><br>
  <input type="text" id="nameL" placeholder="输入指派人">
  <br><br>
  <button type="button" id="clickMe" class="btn btn-success">添加任务</button>
  <span id="currentTime"></span>
</form>
<div class="container card-columns" id="cardList">
  <!-- 任务卡片会动态渲染到此处 -->
</div>

• 事件绑定改用箭头函数包裹业务逻辑，只有点击按钮时才会执行新增任务的流程
• 新增todoList数组统一存储所有任务对象，后续做编辑、删除、筛选操作时，只需要操作这个数组后调用renderCards重新渲染即可，逻辑更清晰
• 移除了动态卡片里重复的固定ID，改用类选择器和data-*属性存储任务索引，避免ID冲突
• 增加了输入读取、非空校验逻辑，不再使用硬编码的任务名
• 自动填充任务创建时间，修正了原代码中错误的Bootstrap类名（多余的bg类）

内容的提问来源于stack exchange，提问作者Soujanya Yellaboina