The checkbox that is created next to the task can not be set to the checked position which would create a line across the task. When opening console I don’t get any errors only an issue which is:
(A form field element has neither an id nor a name attribute)
Which when clicking on the checkbox increments up.
I am not sure how to assign a name or attribute to the checkbox as this is what i assume the problem is.
This is the function that would create the check box and list item in the java script file.
function renderTasks () {
const taskList = document.getElementById("added-task")
taskList.innerHTML = "";
tasks.forEach((task, index) => {
const li = document.createElement("li");
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = task.completed;
checkbox.addEventListener("change", () => toggleTask(index));
li.appendChild(checkbox);
This is the body from the index.html file
<div class="container">
<input type="text" id="addTaskInput" placeholder="Add Task">
<button class="add-task-btn" onclick="addTask()">Add Task</button>
<ul id="added-task"></ul>
</div>
This is the style sheet that crosses off the listed item.
.task.completed {
text-decoration: line-through;
color: #ccc;
}