Estoy tratando de dibujar una línea a través de la tarea una vez que se presiona el botón "Listo", pero parece que no puedo ingresar el código correcto.
'''
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'
No estoy del todo seguro, pero parece que tiene un apóstrofe adicional junto a 'line-through'
¿Qué pasa si intentas ejecutar el código? ¿Tienes algún tipo de violín disponible? Entonces puedo investigar más.
Su principal problema es que cuando intenta apuntar al nombre de la tarea, está usando un document.getElementByTagName('span') . Entonces, esto va a mirar todo el documento y encontrar el primer intervalo, mientras que lo que realmente necesita es buscar localmente. El método querySelector() es fácil de usar ya que solo puede usar selectores css.
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 }