Estoy construyendo una lista de tareas pendientes y solo me queda una función por construir, la función que hará posible marcar las tareas como realizadas. Parece que no puedo hacer que funcione. ¿Alguien que pueda guiarme en la dirección correcta? El siguiente código es lo que tengo por ahora y la función debería poder crear una línea cuando hago clic en el botón "Listo".
// The buttot that will mark a task as done let btnDone = document.createElement("button"); btnDone.classList.add("btnDone"); btnDone.innerHTML = "<i class='fas fa-check'></i>"; btnDone.addEventListener("click", (e) => { done(e, i); }); todoLi.appendChild(btnDone); // The function that should create a line-through on the task that is clicked on function done(e, i) { createHtml(); }Desea crear una especie de "botón de alternar", como este
var myButton = ...; myButton.addEventListener("click", function() { this.classList.toggle("toggled"); });Entonces quieres en tu CSS
/* define toggle CSS style */ .toggle { ... } /*define the style for the div (or whatever your list item is) following your toggle button */ .toggle ~ div { text-decoration: line-through; }Creé una demostración en este bolígrafo para ti >>> https://codepen.io/emekaorji/pen/OJjKEao
// Let's say you have multiple tasks to check, declare a variable to represent all of them let todoList = document.querySelectorAll("li"); // This represents all todos // The following is where the whole functionality of the app will be todoList.forEach(e => { // 'e' represents 'each' todo let listText = e.querySelector(".task"); let btnDone = document.createElement("button"); e.appendChild(btnDone); btnDone.innerHTML = "<i class='fas fa-check'></i>"; btnDone.addEventListener("click", () => { done(); }); // The function that should create a line-through on the task that is clicked on function done() { listText.classList.toggle("checked"); btnDone.classList.toggle("btnDone"); } });Acabo de tomar su código y lo refactoricé, también le agregué un poco, pero básicamente la respuesta a su pregunta está en la 'función hecha ()'. Solo necesita alternar la clase que agregará y eliminará el tachado en la tarea cuando haga clic en su botón.
listText.classList.toggle("checked");y la clase 'marcada' se define en el estilo de la siguiente manera:
.checked { text-decoration: line-through; opacity: .5; }...todavía revisa el lápiz de código aquí