如果选中复选框，如何在文本中换行

Question

我正在尝试为每个元素制作一个带有复选框的待办事项列表。当复选框被选中时，我希望我的元素被设置为线条通过的样式。

这是我的代码

我有这个HTML

<h1>My List</h1>
<input id="item" type="text" />
<button id="add">Add</button>
<ul id="toDo"></ul>

和js

document.addEventListener('DOMContentLoaded', function () {
const addButton = document.querySelector('#addButton');
addButton.addEventListener('click', function () {
const textInput = document.querySelector('#itemText');
const itemText  = textInput.value;
if (itemText) {
const ul = document.querySelector('ul');
const li = document.createElement('li');
li.addEventListener('click', function (e) {
if (e.target!=checkbox){
e.target.parentNode.removeChild(e.target);
}
//i try do use this
if (e.target==checkbox){
if (checkbox.checked == true){
e.target.parentNode.textContent.style.textDecoration = "linethrough";
} 
}

});

var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.value = 0;
li.appendChild(checkbox);
li.appendChild(document.createTextNode(itemText));
ul.appendChild(li);
textInput.value = '';
}
});
});

我得到未捕获的类型错误：无法设置未定义的属性"textDecoration"。如何设置我单击的复选框旁边的文本样式？

Answer 1

e.target.parentNode.textContent是纯字符串，因此在这种情况下不能使用style和textDecoration。

也使用"line-through"代替"line-though">

所以使用下面的一个就可以了！

e.target.parentNode.style.textDecoration="直通"；