Estoy tratando de crear una aplicación To-Do en HTML, CSS y Vanilla JavaScript, pero aparece el error checkBox is undefined cuando trato de alternar la clase completada (que tiene decoración de texto: line-through) en mi checkBox constante. ¿Alguien sabe cómo hacer que esto funcione? Editar: agregué códigos HTML y CSS. Mi código es el siguiente:
function addTask() { const checkBox = document.createElement("INPUT"); checkBox.setAttribute("type", "checkbox"); let task = document.createElement("li"); let inputVal = document.getElementById("taskName").value; if (inputVal === "") { alert ("Luilak!") return } task.innerHTML = inputVal; taskItem.appendChild(task); taskItem.appendChild(checkBox); let taskList = []; taskList.push(inputVal); } if (checkBox.checked === true) { taskItem.classList.toggle("completed", true) } else { taskItem.classList.toggle("completed", false) } html { text-align: center; } h1 { font-family: arial; } h2 { font-family: arial; font-style: italic; } #add { background-color: hsl(185,100%,50%); font-family: arial; font-size: 20px; border-radius: 15px; margin-top: 25px; height: 50px; width: auto; } .completed { text-decoration: line-through; } li { font-family: arial; } <!DOCTYPE html> <html lang="en"> <head> <link href="Style.css" rel="stylesheet"> <script src="Script.js"></script> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>To-Do App</title> </head> <body> <h1>To-Do App</h1> <h2>Today</h2> <ul id="taskItem"></ul> <input type="text" id="taskName" value=""> <br> <button onclick="addTask()" type="button" id="add">Add task</button> </body> </html>Utilice el evento onchange .
Está marcando directamente checkBox.checked === true dentro de la función, esto se verificará solo una vez. Esto debe hacerse dentro del onchange de la casilla de verificación. Dentro de eso, marque el valor de la casilla de verificación y cambie la clase de task , que es su elemento li .
function addTask() { const checkBox = document.createElement("INPUT"); checkBox.setAttribute("type", "checkbox"); checkBox.onchange = function(e) { if(e.target.checked) { } } let task = document.createElement("li"); let inputVal = document.getElementById("taskName").value; if (inputVal === "") { alert("Luilak!") return } task.innerHTML = inputVal; taskItem.appendChild(task); taskItem.appendChild(checkBox); let taskList = []; taskList.push(inputVal); checkBox.onchange = function(e) { if(e.target.checked) { task.classList.toggle("completed", true) } else { task.classList.toggle("completed", false) } } } html { text-align: center; } h1 { font-family: arial; } h2 { font-family: arial; font-style: italic; } #add { background-color: hsl(185, 100%, 50%); font-family: arial; font-size: 20px; border-radius: 15px; margin-top: 25px; height: 50px; width: auto; } .completed { text-decoration: line-through; } li { font-family: arial; } <h1>To-Do App</h1> <h2>Today</h2> <ul id="taskItem"></ul> <input type="text" id="taskName" value=""> <br> <button onclick="addTask()" type="button" id="add">Add task</button>Por aquí
const todoList = document.querySelector('ul#taskItem') , btAddTask = document.querySelector('button#add') , task = document.querySelector('#taskName') ; btAddTask.onclick = e => { task.value = task.value.trim() // remve extra spaces if ( task.value === '' ) // control first { alert ('Luilak!') return } let newLI = document.createElement('li') newLI.innerHTML = `<input type="checkbox"> ${task.value}` // use back quotes system task.value = '' // clear input 4 next usage todoList.appendChild(newLI); } todoList.onclick = e => // use event delegation { if (!e.target.matches('input[type="checkbox"]')) return // verify clicked element e.target.closest('li').classList.toggle('completed', e.target.checked) // 1 line 4 both cases } html { text-align : center; font-family : Arial, Helvetica, sans-serif; /* same font 4 both elements */ } h2 { font-style : italic; } #add { background : hsl(185,100%,50%); font-size : 1.8em; /* use em unit */ border-radius : .7em; margin : 1em; padding : .2em .7em; } .completed { text-decoration : line-through; } #taskItem { margin : .1em auto; width : 12em; padding : 0; list-style : none; text-align : left; } #taskItem li { display : inline-block; width : 100%; margin-bottom : .3em; padding : .4em; background : whitesmoke; } <h1>To-Do App</h1> <h2>Today</h2> <input type="text" id="taskName" value=""> <br> <button type="button" id="add">Add task</button> <ul id="taskItem"></ul>