Currently, I'm in the process of creating a basic ToDo list using HTML, JS, and CSS. The last task on my list is to display to the user the total number of tasks and how many have been completed. For instance, if there are 3 completed tasks out of 7 in total, it should show as 3/7. I've attempted to achieve this using event listeners but have been unable to make it work. How can I utilize the output element in both the HTML and JS to accomplish this?
var button = document.getElementById('button')
var ul = document.getElementById('todo')
var output = document.getElementsByName('result')
button.addEventListener("click", addTask);
button.addEventListener("click", function(event) {
event.preventDefault()
})
function addTask() {
var checkbox = document.createElement("INPUT")
checkbox.setAttribute("type", "checkbox");
var label = document.createElement("LABEL");
var li = document.createElement("LI");
var task = document.createTextNode(document.getElementById('task').value);
label.appendChild(task)
li.appendChild(label)
li.insertBefore(checkbox, li.childNodes[0])
ul.appendChild(li)
var date = new Date()
tasks.push({
text: document.getElementById('task').value,
date: date
})
}
var tasks = []
console.log(tasks)#todo {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
input[type=checkbox]:checked + label {
text-decoration: line-through;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
</head>
<body>
<header>
<h1>To-do list</h1>
</header>
<form class="" action="" method="">
<input type="submit" name="button" value="Add task" id="button">
<input type="text" name="input" id="task" autofocus>
<output name="result"></output>
<ul id="todo"></ul>
</form>
<script type="text/javascript" src="todo.js"></script>
</body>
</html>