How can I add the style text-decoration: line-through with JavaScript when the checkbox is checked?-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>