I am trying to draw a line throuh the task once the "done" button is pushed but i can't seem to put in the right code.
'''
function addTask() {
let input = document.getElementById("task").value;
if (input == "") {
window.alert("You must enter a value in the New Task field.");
} else {
let taskList = document.getElementById("lista");
taskList.innerHTML +=
`<li ><span id=${input} >` +
input +
"</span ><button onclick='this.parentNode.parentNode.removeChild(this.parentNode)' class='delete'>Delete</button> <button onclick='document.getElementByTagName('span').style.textDecoration = 'line-through'' class='done'>Done</button>";
}
}
'''
<button onclick='document.getElementByTagName('span').style.textDecoration = 'line-through''
I am not entirely sure but it looks like you have an extra apostrophe sitting next to 'line-through'
What happens if you try to execute the code? Do you have some sort of fiddle available? Then i can investigate further.
Your main problem is that when trying to target the task name, you're using a document.getElementByTagName('span'). So this is going to look at the whole document and find the first span while what you actually need is to search locally. The querySelector() method is easy to use since you can just use css selectors.
const input = document.getElementById('task');
function addTask(){
const taskName = input.value;
//check if task name isn't empty
const newTask = `
<li>
<span>${taskName}</span>
...
<button onclick = "this.parentNode.querySelector('span').style.textDecoration = 'line-through'">Done</button>
</li>
`;
//append this to the task list
}