I'm currently working on a basic to-do list feature where, upon checking the checkbox next to an item, both the text and delete button get a strikethrough style. Is there a way for me to apply the strikethrough effect only to the text element, leaving the delete button unaffected?
Although I attempted to target specific children elements in my code, as a novice coder, I might have made mistakes along the way. I'm struggling to identify how to isolate the text item exclusively without impacting the delete button.
Code Snippet
let taskList = document.getElementById('taskList');
let taskBox = document.getElementById('taskBox');
let taskCount = 0;
document.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
addTask();
}
});
function addTask() {
let taskVal = taskBox.value;
if (taskVal.length < 1) {
window.alert('Task Box Empty');
} else {
let itemDiv = document.createElement('li');
let itemCheck = document.createElement('input');
let textItem = document.createTextNode(taskVal);
let itemDelete = document.createElement('button');
itemDiv.classList.add('itemDiv');
itemCheck.style.height = "50px";
itemCheck.type = "checkbox";
itemCheck.name = "finished";
itemCheck.id = "checkbox";
textItem.innerText = taskVal;
itemDelete.innerText = "x"
taskList.append(itemDiv);
itemDiv.appendChild(itemCheck);
itemDiv.appendChild(textItem);
itemDiv.appendChild(itemDelete);
taskCount++;
itemCheck.onclick = finishTask.bind(itemCheck);
itemDelete.onclick = deleteItem.bind(itemDiv);
document.getElementById('taskBox').innerHTML = "";
taskBox.value = "";
}
}
function finishTask() {
let children = this.parentNode.children;
if (this.checked) {
this.parentNode.style.textDecoration = "line-through";
} else {
this.parentNode.style.textDecoration = "none";
}
}<h1>My To-Do List</h1>
<hr>
<div class="addTaskContainer">
<input id="taskBox" type="textarea" placeholder="Add Task" autocomplete="off">
<button class="add" onClick="addTask()">Add Task</button>
</div>
<ul class="taskList" id="taskList"></ul>
<button class="bottomBtn" onClick="clearAll()">Clear All</button>
<button class="bottomBtn" onClick="clearFinished(itemCheck)">Clear Finished</button>