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

Question

I've appended checkboxes to each appended list item. I'm trying to get each checkbox to work distinctly for each list item, but when I click the checkbox, all of the list items get struck through. I am thinking the solution requires creating a for loop to create distinct id's for each appended list item, but I'm having trouble accomplishing this. Any guidance would be greatly appreciated. Thank you.

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';
  }
}

Answer 1

you should apply the style to the li element and not the whole list.

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

Answer 2

Your strike() function is setting a style on the entire toDoList element. You probably want to scope that to your 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';
}

Answer 3

I took the time to rewrite your code in the following way:

Your first issue was that you was assigning the text-decoration property to the toDoListElement and each children was inheriting it.

You don't need to loop or to assign multiple different ids because JavaScript will save variable references for you (if you use the local variable newListElement inside your event handler, when the handler is executed it will use the last value that the variable had).

 let inputElement = document.getElementById("inputElement"); let toDoListElement = document.getElementById("toDoList"); document.getElementById('subButton').addEventListener('click', hitSubmit); function hitSubmit() { let newListElement = document.createElement('li'); let checkboxElement = document.createElement('input'); checkboxElement.setAttribute('type','checkbox'); checkboxElement.addEventListener('change', function strike(e) { if (e.target.checked) { newListElement.style.textDecoration = 'line-through'; } else { newListElement.style.removeProperty('text-decoration') } }); checkboxElement.style.marginLeft = '10px'; newListElement.innerText = inputElement.value; newListElement.appendChild(checkboxElement); toDoListElement.appendChild(newListElement); } 

 <input id="inputElement"></div> <button id="subButton" type="button">ADD</button> <div id="toDoList"></div> 

Finally, for the localStorage part, I didn't include it in the snippet, but I would use the following:

localStorage.setItem('toDoKey', JSON.stringify((JSON.parse(localStorage.getItem('toDoKey')) || []).concat([inputElement.value])));

You was passing the array directly to localStorage.setItem() which only accepts string values (for that you use JSON.stringify() and JSON.parse() )