Issue
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>Solution
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>Answered By - Nitheesh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.