JavaScriptでのチェックリスト項目の完了

同様の方法で、完了ボタンにもイベントを設定しましょう。

javascriptlet mark = document.createElement('span');
mark.classList.add('mark');
mark.textContent = '完了';
mark.addEventListener('click', function() {
  // ここにタスクを完了としてマークするコードを書きます
});
li.appendChild(mark);

タスクを完了済みとしてマークするには、対応するliタグにCSSクラスを追加する必要があります。 例えば、このクラスをdoneと名付けましょう。

このクラスに対して、適切なCSSコードを記述できます：

css#list .done {
  text-decoration: line-through;
}