Не удается применить свойства флажка для цикла for

Question

Хорошо, так что я надеюсь, что я просто что-то упустил.В основном я делаю список задач, в котором я хочу, чтобы флажок отображался с каждым элементом списка (это работает).Когда пользователи нажимают на флажок, textDecoration = "line-through" должен проходить через класс listItem.Это означает, что линия проходит через задачу, которую создает человек.Вот код, с которым я в основном работаю:

function show() {
var todos = get_todos();

var html = '<ul>';
for(var i=0; i < todos.length; i++) {
    html += '<span><li class="listItem" style="float:left;">' + todos[i] + '</li><input class="checkBox" type="checkbox">' + '<button class="remove" id="' + i  + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>';
};
html += '</ul>';

document.getElementById('todos').innerHTML = html;

var buttons = document.getElementsByClassName('remove');
for (var i=0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', remove);
};

////////////////////////////////////
//Everything above here works. Below is the checkbox issue

var checkBox = document.getElementsByClassName("checkBox");
var listItem = document.getElementsByClassName("listItem");

for (var i=0; i < checkBox.length; i++) {
    if (checkBox.checked == true){
        listItem.style.textDecoration = "line-through";
    }else {
        listItem.style.textDecoration = "none";
    }
};}

Где я сейчас нахожусь, если я создаю функцию onClick в исходном флажке, я могу использовать это выражение if / else и это работает,Это не будет работать, если я установлю переменные checkBox / listItems, используя document.getElementsByClassName, но это будет работать, если я буду использовать document.getElementById.Проблема в том, что он работает только с первой задачей, которую создает пользователь, и ни с одной другой, созданной после.Я предполагаю, что это либо потому, что идентификаторы работают только для одного элемента (в отличие от класса, который работает для нескольких), либо потому, что он не циклически повторяет цикл for, как в приведенном выше коде.

TL / DR В основном, когда я запускаю приведенный выше код, я получаю «Uncaught TypeError: Невозможно установить свойство 'textDecoration' undefined на шоу (todo.js: 57) в todo.js: 75 ".

Я не получаю эту ошибку, когда создаю отдельную функцию для флажка и использую elementbyid вместо elementsbyclass (изменяя id / class в разделе html выше)

Iочень хочется, чтобы эти сквозные эффекты работали над всеми задачами, а не только над первой.Любые идеи с благодарностью.Спасибо всем!

Answer 1

Мне кажется, проблема в том, что checkBox - это массивоподобный объект.Я думаю, вы знаете, что, когда вы писали код, вы смотрите на checkBox.length, однако затем вам не удалось проиндексировать массив.

У вас есть:

var checkBox = document.getElementsByClassName("checkBox");
var listItem = document.getElementsByClassName("listItem");

for (var i=0; i < checkBox.length; i++) {
    if (checkBox.checked == true){
        listItem.style.textDecoration = "line-through";
    }else {
        listItem.style.textDecoration = "none";
    }
};}

Чтобы было понятноЯ перемножил имена, где это было необходимо, а также добавил ссылку на индекс:

var checkBoxes = document.getElementsByClassName("checkBox");
var listItems = document.getElementsByClassName("listItem");

for (var i=0; i < checkBoxes.length; i++) {
    if (checkBoxes[i].checked == true){
        listItems[i].style.textDecoration = "line-through";
    }else {
        listItems[i].style.textDecoration = "none";
    }
};}

Answer 2

Я бы сделал это с помощью css вместо javascript (это, как правило, мое правило, когда это возможно).В этом случае вам нужно сделать одно небольшое изменение в вашей разметке: так как нет селектора previous-sibling, вам придется поставить input s перед соответствующими li s, но так как li s float:left все равно отображается точно так же.

input:checked + li {
  text-decoration:line-through;
}

<ul>
<span><input class="checkBox" type="checkbox"><li class="listItem" style="float:left;">foo</li><button class="remove" id="' + i  + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>
<span><input class="checkBox" type="checkbox"><li class="listItem" style="float:left;">bar</li><button class="remove" id="' + i  + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>
<span><input class="checkBox" type="checkbox"><li class="listItem" style="float:left;">baz</li><button class="remove" id="' + i  + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>
</ul>

Answer 3

function show() {
  var todos = get_todos();

  var html = '<ul>';
  for (var i = 0; i < todos.length; i++) {
    html += '<span><li class="listItem" style="float:left;">' + todos[i] + '</li><input class="checkBox" type="checkbox">' + '<button class="remove" id="' + i + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>';
  };
  html += '</ul>';

  document.getElementById('todos').innerHTML = html;

  var buttons = document.getElementsByClassName('remove');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', remove);
  };

  ////////////////////////////////////
  //Everything above here works. Below is the checkbox issue

  var checkBox = document.getElementsByClassName("checkBox");
  var listItem = document.getElementsByClassName("listItem");

  for (var i = 0; i < checkBox.length; i++) {
    if (checkBox[i].checked == true) {
      listItem[i].style.textDecoration = "line-through";
    } else {
      listItem[i].style.textDecoration = "none";
    }
  };
}

Возможно, вы пропустили индекс в массиве listItem и checkBox