待办任务统计功能故障排查：无法正确展示完成/总任务数

需求：每次更新任务（勾选、取消勾选或添加任务）时，output元素需更新显示已完成任务数与总任务数，格式如3/7 completed。

现有代码前几部分功能正常，但Part5无法实现该统计功能，以下是完整代码：

HTML代码 #

<div id="form">
  <div id="inputForm">
    <h1>New Task</h1>
    <div id="row">
      <div id="input">
        <input type="text" id="inputText" name="addNewList">
      </div>
    </div>
    <div id="row">
      <div id="button1">
        <button id="button" onclick="addTask()"><span>Add to list</span></button>
      </div>
    </div>
    <div id="row">
      <div class="list1" id="list">
        <h1 id="h1">My to-do list</h1>
        <p id="output"></p>
        <ul>
        </ul>
      </div>
    </div>
  </div>
</div>

JavaScript代码 #

//Part 3
let n = [];

function changeText() {
  let string = "";
  for (var i of n) {
    string += "<li><input type ='checkbox' onchange = 'displayCheckedGroup()'><span>" + i[0] + "</span></li>";
  }
  document.querySelector('#list ul').innerHTML = string;
}

//Part 4
function addTask() {
  inputText = document.getElementById('inputText').value;
  if (!inputText.trim()) return; // 空任务不添加
  n.unshift([inputText, Date()]);
  changeText();
  displayCheckedGroup(); // 添加任务后更新统计
  document.getElementById('inputText').value = ""; // 清空输入框
  console.log(n);
}

//Part 5 修正后
function displayCheckedGroup() {
  // 获取已勾选的任务数
  const completedCount = document.querySelectorAll('input[type=checkbox]:checked').length;
  // 获取总任务数
  const totalCount = document.querySelectorAll('#list ul input[type=checkbox]').length;
  // 更新显示文本
  document.getElementById('output').innerText = `${completedCount}/${totalCount} completed`;
}

问题排查与修正点： #

1. 变量作用域错误：原Part5中用循环变量i来表示已完成数，循环结束后i的值虽等于已完成数，但直接用querySelectorAll的length属性更直接且不易出错，无需额外循环遍历。
2. DOM选择器错误：原代码获取总任务数的选择器#form > #row > #list > ul > input不符合实际DOM结构（#list是.list1的子元素，而非#row的直接子元素），改用#list ul input[type=checkbox]可精准定位所有任务复选框。
3. 添加任务后未触发统计更新：原addTask函数仅更新任务列表，未调用displayCheckedGroup，导致添加任务时统计文本不更新，现在添加任务后主动调用该函数。
4. 无效事件绑定：原output标签的onchange事件无效（<p>标签不支持该事件），已移除。

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