Javascript 如何使每个列表项的复选框分别工作？

我已将复选框附加到每个附加的列表项。我正试图使每个复选框对每个列表项都有明确的作用，但当我单击复选框时，所有列表项都会被划破。我认为解决方案需要创建一个for循环来为每个附加的列表项创建不同的id，但我在实现这一点上遇到了困难。任何指导都将不胜感激。多谢各位

var inputtedChoreVar= document.getElementById("inputtedChore");
var toDoListVar= document.getElementById("toDoList");

var toDoArray= [];

document.getElementById('subButton').addEventListener('click',hitSubmit);

function hitSubmit() {

  let x= inputtedChoreVar.value;
  toDoArray.push(x);
  console.log(toDoArray);

  localStorage.setItem('toDoKey', toDoArray);

  var newListElement= document.createElement('LI');
  var newTextNode= document.createTextNode(x);
  newListElement.appendChild(newTextNode);
  toDoListVar.appendChild(newListElement);

  var fButtonElement= document.createElement('input');
  fButtonElement.setAttribute('type','checkBox');
  newListElement.appendChild(fButtonElement);
  fButtonElement.onclick= strike;

  function strike() {
    document.getElementById('toDoList').style.textDecoration='line-through';
  }
}

---

应该将样式应用于li元素，而不是整个列表

function strike() {
    newListElement.style.textDecoration='line-through';
  }

strike（）

函数正在为整个

toDoList

元素设置样式。您可能希望将其范围扩展到您的

LI

var inputtedChoreVar= document.getElementById("inputtedChore");
var toDoListVar= document.getElementById("toDoList");

var toDoArray= [];

document.getElementById('subButton').addEventListener('click',hitSubmit);

function hitSubmit() {

  let x= inputtedChoreVar.value;
  toDoArray.push(x);
  console.log(toDoArray);

  localStorage.setItem('toDoKey', toDoArray);

  var newListElement= document.createElement('LI');
  var newTextNode= document.createTextNode(x);
  newListElement.appendChild(newTextNode);
  toDoListVar.appendChild(newListElement);

  var fButtonElement= document.createElement('input');
  fButtonElement.setAttribute('type','checkBox');
  newListElement.appendChild(fButtonElement);
  fButtonElement.onclick= function() { strike(newListElement); } // function that calls "strike" with an argument
}

function strike(el) {
  el.style.textDecoration='line-through';
}

---

我花时间用以下方式重写了您的代码：

您的第一个问题是，您将

文本装饰

属性分配给

ToDoListeElement

，并且每个子级都继承它

您不需要循环或分配多个不同的ID，因为JavaScript将为您保存变量引用（如果您在事件处理程序中使用局部变量

newliselement

，则在执行处理程序时，它将使用变量具有的最后一个值）

let inputElement=document.getElementById（“inputElement”）；
让toDoListElement=document.getElementById（“toDoList”）；
document.getElementById（'subButton'）。addEventListener（'click'，'hitSubmit'）；
函数hitSubmit（）{
让newListElement=document.createElement（'li'）；
让checkboxElement=document.createElement（'input'）；
setAttribute（'type'，'checkbox'）；
CheckBoxeElement.addEventListener（'change'，函数罢工（e）{
如果（例如，选中目标）{
newListElement.style.textDecoration='line through'；
}否则{
newListElement.style.removeProperty（“文本装饰”）
}
});
checkboxElement.style.marginLeft='10px'；
newListElement.innerText=inputElement.value；
appendChild（checkboxElement）；
toDoListElement.appendChild（newListElement）；
}

添加

请您再发布一些代码好吗？

x

来自哪里？那是在一个圈里还是什么的？编辑：您还有和额外的括号，不清楚

toDoListVar

从何而来。对不起，这是我第一次问问题。我的待办事项列表的完整代码作为编辑发布在原始问题中。谢谢你的帮助，谢谢。这很有帮助。我意识到我正在为整个toDoList元素设置一个样式，因为任何复选框都会在所有列表项中放置一行，但我不知道如何将其范围限定为“LI”。我一直在努力处理附加的DOM元素。我认为你的解释将帮助我朝着正确的方向前进。非常感谢。谢谢你的解释。非常感谢。您的代码还澄清了我遇到的另一个问题，即取消选中复选框后删除文本装饰。@DavidJang欢迎您。请检查我上次编辑的其他信息。评估完答案后，记得选择一个。谢谢欧内斯托。我非常感激。