JavaScript统计待办清单已完成条目数函数运行异常问题求助

错误原因 #

• 核心问题是countDone函数的return语句放置位置错误：你把它写在了for循环内部，函数执行第一次循环时就会直接返回当前的numberOfDone值，根本不会遍历完整个待办列表，自然无法统计到全部已完成条目。
• 如果修正后仍未得到预期结果，可额外排查两个常见问题：
  • printCountDone的调用时机是否正确：需要在每次待办列表数据变更（新增条目、切换完成状态、删除条目）后都调用一次，才能保证统计值和实际状态同步
  • 确认页面中存在id为todo-done的DOM元素，避免querySelector返回空值导致赋值失败

修正后代码 #

function countDone() {
  let numberOfDone = 0
  for (let i = 0; i < todoList.length; i++) {
    if (todoList[i].isDone === true) {
      numberOfDone = numberOfDone + 1
    }
  }
  // return语句移到for循环结束之后，遍历完全部条目再返回统计结果
  return numberOfDone
}
    
function printCountDone() {
  let f = countDone()
  document.querySelector('#todo-done').innerHTML = f
}

可选简化写法 #

你也可以用原生数组方法实现更简洁的统计逻辑，无需手动编写循环：

// 筛选出所有isDone为true的条目，直接返回其长度即可
const countDone = () => todoList.filter(item => item.isDone).length

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