Javascript 一个简单的todoApp复选框问题

我有一个关于DOM操作的简单方法

const类名称={
待办事项：“待办事项容器”，
待办事项复选框：“待办事项复选框”，
待办事项文字：“待办事项文字”，
待办事项删除：“待办事项删除”，
}
const list=document.getElementById（'todo-list'）
const itemCountSpan=document.getElementById（'item-count'）
const uncheckedCountSpan=document.getElementById（'unchecked-count'）
让计数=0；
设checkedCount=0；
让我们去做；
函数newTodo（）{
todo=提示（“请输入要执行的任务”，“在此处输入”）
计数++；
常量标记=`

${todo}
`
list.insertAdjacentHTML（“beforeend”，markup）
itemCountSpan.innerHTML=count；
document.getElementById（todo）.addEventListener（“单击”，检查）；
}
函数检查（）{
让article=document.getElementById（todo）；
if（article.dataset.ischecked==“false”）{
article.dataset.ischecked=“true”；
checkedCount++；
uncheckedCountSpan.innerHTML=checkedCount
}
否则{
article.dataset.ischecked=“false”；
支票计数--；
uncheckedCountSpan.innerHTML=checkedCount
}
}

待办事项应用程序
我的待办事项应用程序
项目计数：0
未选中计数：0
新待办事项

为什么您的手机不工作

您正在将最近添加的项目ID存储为名为

todo

的变量。这意味着在

check（）

函数中，行

let article = document.getElementById(todo); 

…将始终指最后添加的项目。只需在最后一项上来回切换检查的

数据


如何修复它

您希望单击事件引用正在单击的复选框。我们可以通过向
check（）
函数添加一个名为
event
的参数来实现这一点。这样，
event.target将允许我们引用已单击的元素

function check(event) {
    let article = event.target; //This is the clicked checkbox!
}

（因此，
todo
变量不再需要是全局变量。）


另一个重要注意事项

我强烈建议不要使用
todo
作为元素ID，因为您的ID中不能有空格。任何时候，只要输入带有空格的待办事项，您当前的代码就会抛出一个错误

考虑到您不允许删除项目，您可以将其设置为类似于
“todo-”+count
，这样您的ID将是
todo-0
，
todo-1
，
todo-2
，等等

我在下面的代码中也实现了这一点，允许您在待办事项中添加空格


const类名称={
待办事项：“待办事项容器”，
待办事项复选框：“待办事项复选框”，
待办事项文字：“待办事项文字”，
待办事项删除：“待办事项删除”，
}
const list=document.getElementById（'todo-list'）
const itemCountSpan=document.getElementById（'item-count'）
const uncheckedCountSpan=document.getElementById（'unchecked-count'）
让计数=0；
设checkedCount=0；
函数newTodo（）{
var todo=提示（“请输入要执行的任务”，“在此处输入”）；
var newId=“todo”+计数；
计数++；
常量标记=`

${todo}
`
list.insertAdjacentHTML（“beforeend”，markup）
itemCountSpan.innerHTML=count；
document.getElementById（newId）.addEventListener（“单击”，检查）；
}
功能检查（事件）{
让article=event.target；
if（article.dataset.ischecked==“false”）{
article.dataset.ischecked=“true”；
checkedCount++；
uncheckedCountSpan.innerHTML=checkedCount
}否则{
article.dataset.ischecked=“false”；
支票计数--；
uncheckedCountSpan.innerHTML=checkedCount
}
}

待办事项应用程序
我的待办事项应用程序
项目计数：0
未选中计数：0
新待办事项

为什么您的手机不工作

您正在将最近添加的项目ID存储为名为
todo
的变量。这意味着在
check（）
函数中，行

let article = document.getElementById(todo); 

…将始终指最后添加的项目。只需在最后一项上来回切换检查的
数据


如何修复它

您希望单击事件引用正在单击的复选框。我们可以通过向
check（）
函数添加一个名为
event
的参数来实现这一点。这样，
event.target将允许我们引用已单击的元素

function check(event) {
    let article = event.target; //This is the clicked checkbox!
}

（因此，
todo
变量不再需要是全局变量。）


另一个重要注意事项

我强烈建议不要使用
todo
作为元素ID，因为您的ID中不能有空格。任何时候，只要输入带有空格的待办事项，您当前的代码就会抛出一个错误

考虑到您不允许删除项目，您可以将其设置为类似于
“todo-”+count
，这样您的ID将是
todo-0
，
todo-1
，
todo-2
，等等

我在下面的代码中也实现了这一点，允许您在待办事项中添加空格


const类名称={
待办事项：“待办事项容器”，
待办事项复选框：“待办事项复选框”，
待办事项文字：“待办事项文字”，
待办事项删除：“待办事项删除”，
}
const list=document.getElementById（'todo-list'）
const itemCountSpan=document.getElementById（'item-count'）
const uncheckedCountSpan=document.getElementById（'unchecked-count'）
让计数=0；
设checkedCount=0；
函数newTodo（）{
var todo=提示（“请输入要执行的任务”，“在此处输入”）；
var newId=“todo”+计数；
计数++；
常量标记=`

${todo}
`
list.insertAdjacentHTML（“beforeend”，markup）
itemCountSpan.innerHTML=count；
document.getElementById（newId）.addEventListener（“单击”，检查）；
}
功能检查（事件）{
让article=event.target；
if（article.dataset.ischecked==“false”）{
article.dataset.ischecked=“true”；
checkedCount++；
取消勾选