I am trying to create a To-Do App in HTML, CSS and Vanilla JavaScript, but I get the error checkBox is undefined when I try to toggle the class completed (which has text-decoration: line-through) on my checkBox constant. Does anybody know how to make this work? Edit: I added HTML and CSS codes. My code is as following:
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>Use onchange event.
You are directly checking checkBox.checked === true inside the function, this will check only once. Tis must be done inside the onchange of the checkbox. Inside that check the value of the checkbox and toggle the class of task, which is your li element.
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>this way
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>