javascriptのtodoリストで、タスクを2つ以上作らないとチェック時に打ち消し線が表示されない

Question

##現象
JavaScriptでtodoリストを作っていますが、タスクを2つ以上作らないとチェックマークを付けた際にに打ち消し線が表示されません。
##現象が発生しているTodoリスト
http://nakatakira.html.xdomain.jp/test/test4/
##手順
1.ADDING TASK欄に、タスクを書き込みます。
2.Enterキーを押下すると、チェックマークとゴミ箱が含まれたタスクが表示されます。
3.チェックマークをチェックしても、打ち消し線は表示されません。
4.2つ以上タスクを作成すると、チェックマークにチェックすると打ち消し線が表示されることを確認しております。

※コンソールにもエラーが表示されないことを確認しております。

	const addTask = document.getElementById('add');
	const list = document.getElementById('todos');

	addTask.addEventListener('submit', e => {
		// デフォルトのイベントを無効
		e.preventDefault();
		function createTodoList (task) {
			// HTMLテンプレートを生成
				const html =
				`<ul class="listGroup__item todos__item">
				<li class="todo__checkbox"><input type="checkbox" name="taskcheck" ></li>
				<li class="todo__task">${task}</li>
				<li class="delete"></li>
			</ul>
			`;
			list.innerHTML += html;	
		}	
		// タスクに入力した値を空白を除外して格納
		const task = addTask.add.value.trim();
		if(task.length) {
			// Todo List の HTML を生成
			createTodoList(task);
			// タスクに入力した文字をクリア
			addTask.reset();
		}
		const taskCheck = document.forms.todos.taskcheck;
		for(let i = 0; i < taskCheck.length; i++){
			taskCheck[i].addEventListener('click', () => {
					if(taskCheck[i].checked){
							taskCheck[i].parentNode.nextElementSibling.style.textDecoration = 'line-through';
						} else {
							taskCheck[i].parentNode.nextElementSibling.style.textDecoration = 'none';
						}
				});	
			}
	});

	//削除機能。deleteがクラスについている場合（つまりゴミ箱）。
	list.addEventListener('click', e => {
		if (e.target.classList.contains('delete')){
			e.target.parentElement.remove();
		}

	});

Answer 1

28行目でcheckboxを取得していますが、1個の場合はリストで取れません。
taskCheck.lengthがundefinedになるため、29行目のfor文の処理に入りません。

const taskCheck = document.forms.todos.taskcheck;

document.querySelectorAllでcheckboxを取得すれば1つの場合もNodeListが取れるので動くと思います

Comments

[aki_]

ありがとうございます！
上記の場合だと1つではリストで取得できないのですね、知りませんでした。
「document.querySelectorAll("input[type='checkbox']");」のように、
document.querySelectorAllを使用したらうまくいきました！