单页多待办列表实现独立提交功能的技术咨询

问题根源 #

你当前的核心问题是重复使用了相同的ID（input-area、list、add-button）。DOM规范中ID必须唯一，getElementById只会返回第一个匹配的元素，因此只有Monday的列表能正常工作。

解决方案步骤 #

1. 修正HTML结构（移除重复ID，改用类名）

把重复的ID替换为类名，保留每个.day容器的唯一ID，同时让按钮点击时传递自身元素引用：

<div class="day" id="monday">
  <div class="span">
    <h3 class="day-title">Monday</h3>
  </div>
  <input type="text" class="input input-area">
  <button onclick="addTask(this)">
    <img src="/Images/plus.png" class="add-button">
  </button>
  <ul class="list"></ul>
</div>

<div class="day" id="tuesday">
  <div class="span">
    <h3 class="day-title">Tuesday</h3>
  </div>
  <input type="text" class="input input-area">
  <button onclick="addTask(this)">
    <img src="/Images/plus.png" class="add-button">
  </button>
  <ul class="list"></ul>
</div>

<div class="day" id="wednesday">
  <div class="span">
    <h3 class="day-title">Wednesday</h3>
  </div>
  <input type="text" class="input input-area">
  <button onclick="addTask(this)">
    <img src="/Images/plus.png" class="add-button">
  </button>
  <ul class="list"></ul>
</div>

2. 改写JavaScript逻辑（实现容器级独立操作）

通过按钮定位到所在的日期容器，找到对应输入框和列表；同时用事件委托统一处理所有列表的勾选、删除操作：

// 添加任务函数
function addTask(button) {
  // 获取当前按钮所在的日期容器
  const dayContainer = button.closest('.day');
  const inputBox = dayContainer.querySelector('.input-area');
  const listContainer = dayContainer.querySelector('.list');

  if(inputBox.value.trim() === '') {
    alert('Please enter a valid value :)');
    return;
  }

  let li = document.createElement('li');
  li.textContent = inputBox.value.trim();
  listContainer.appendChild(li);
  
  let span = document.createElement('span');
  span.textContent = "\u00d7";
  li.appendChild(span);

  inputBox.value = '';
}

// 事件委托处理勾选和删除
document.addEventListener('click', function(e) {
  // 切换任务完成状态
  if(e.target.tagName === 'LI'){
    e.target.classList.toggle('checked');
  }
  // 删除任务
  else if(e.target.tagName === 'SPAN'){
    e.target.parentElement.remove();
  }
});

关键改动说明 #

• 移除重复ID：用类名标识同类型元素，确保DOM元素标识唯一
• 容器级定位：通过closest('.day')精准找到当前操作对应的日期容器，实现各列表独立
• 全局事件委托：无需给每个列表单独绑定监听，新增的任务元素也能自动响应事件

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