Theory
Theory
Comments

The “change” event

We found all of the elements in the list. Each element is a separate task. It consists of text and an input of type checkbox. This element works like a switch or a flag: if the checkbox is unchecked, the task has not yet been completed and is waiting for its turn. If there is a checkmark inside, then the task has been completed and it can be removed.

In order to do something with the tasks themselves, you need to respond when the user checks a task’s checkbox. This is where events come in handy.

We could register a click handler on the entire task or the entire <li> element. However, we want to respond specifically to a change in the checkbox’s checked state. In this markup, clicking the label also changes that state.

You can listen for clicks on a checkbox. This option works quite well. However, there is another event that will also come in handy: change. It is triggered when the field state changes. In the case of checkboxes, it is triggered when the state changes from unchecked to checked, and vice versa.

So far we have not found checkboxes inside list elements. Therefore, first let’s find the checkbox inside each task, register the handler, and output some message in the console. We have many elements, so the algorithm will have to be repeated several times. Therefore, we will use a function. In this task, we will complete this function, but in the next one we will call it and check whether our handler really works. We already added a function declaration to the code for you.

If you forgot how to add handlers, you can look at the example below. It shows the syntax for adding a handler:

element.addEventListener('change', function () {
  …
});

And if you want to remember what the code from the example means, you can review this assignment and this one as well.

You may be surprised that we iterate over the elements that are found using querySelectorAll in a loop, like a regular array. We can do that. Because querySelectorAll returns a collection of elements. It looks like an array, but it is not actually one. Therefore, we call collections pseudo-arrays. We will later discuss the differences between collections and arrays. For now, it’s sufficient to know that collections can be iterated over in a loop, just like arrays. We have already encountered collections in the “Introduction to JavaScript in the browser” chapter. For example, we dealt with them in this assignment as well as in this one.

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The To-Do List</title> <link href="style.css" rel="stylesheet"> </head> <body> <h1 class="visually-hidden">The To-Do List</h1> <ul class="todo-list"> <li class="todo-list-item"> <label> <input class="todo-list-input" type="checkbox"> <span>Feed the cat</span> </label> </li> <li class="todo-list-item"> <label> <input class="todo-list-input" type="checkbox"> <span>Leave the country</span> </label> </li> <li class="todo-list-item"> <label> <input class="todo-list-input" type="checkbox"> <span>Go for a run</span> </label> </li> </ul> <p class="empty-tasks hidden">All of the tasks have been completed. There are no new tasks.</p> <form class="add-form" action="https://echo.htmlacademy.ru/courses" method="post"> <input class="add-form-input" type="text" aria-label="Task description" placeholder="For example, buy an elephant" required> <button class="add-form-button" type="submit">Add new task</button> </form> <template id="task-template"> <li class="todo-list-item"> <label> <input type="checkbox" class="todo-list-input"> <span></span> </label> </li> </template> <script src="script.js"></script> </body> </html>

CSS

@font-face { font-weight: 400; font-family: "Muller"; font-style: normal; font-display: swap; src: url("fonts/Muller.woff") format("woff"); } body { margin: 40px 32px; font-size: 18px; line-height: normal; font-family: "Muller", sans-serif; } .visually-hidden, .todo-list-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; clip: rect(0 0 0 0); clip-path: inset(100%); } .hidden { display: none; } .todo-list { margin: 0; padding: 0; list-style: none; } .todo-list-item { margin-bottom: 12px; } .todo-list-item label { display: block; padding: 12px 18px; background-color: #ffffff; border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); cursor: pointer; user-select: none; } .todo-list-item span { display: flex; align-items: center; } .todo-list-input + span::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 16px; background-color: #ffffff; border: 2px solid #69b253; border-radius: 4px; } .todo-list-input:checked + span::before { background-color: #69b253; background-image: url("check-white.svg"); background-repeat: no-repeat; background-position: center; } .todo-list-input:not(:checked):hover + span::before, .todo-list-input:not(:checked):focus + span::before { background-color: rgba(105, 178, 83, 0.2); } .empty-tasks { color: #69b253; } .empty-tasks::before { content: ""; width: 14px; height: 13px; margin-right: 13px; background-image: url("check-green.svg"); background-repeat: no-repeat; background-position: center; } .add-form { display: flex; } .add-form-input { flex-grow: 1; box-sizing: border-box; height: 46px; margin-right: 16px; padding: 12px; font: inherit; border: 1px solid #a1b5c4; border-radius: 4px; } .add-form-input:focus { border: 1px solid #69b253; outline: none; } .add-form-input:hover { box-shadow: 0 0 6px rgba(105, 178, 83, 0.6); } .add-form-input::placeholder { color: #a1b5c4; } .add-form-button { flex-shrink: 0; padding: 12px; font: inherit; color: #ffffff; background-color: #69b253; border: none; border-radius: 4px; user-select: none; touch-action: manipulation; } .add-form-button:hover, .add-form-button:focus { background-color: #5aa045; outline: none; } .add-form-button:active { background-color: #42862e; }

JavaScript

var list = document.querySelector('.todo-list'); var items = list.querySelectorAll('.todo-list-item'); var addCheckHandler = function (item) { // Write your code here }; for (var i = 0; i < items.length; i++) { console.log(items[i]); }

Click inside the mini browser to put the focus in this window.

Goalscompleted

In the body of the addCheckHandler function, create a variable checkbox and assign the element with the todo-list-input class to it. Search for the element inside the item.
On the next line, add the change event handler to the checkbox.
Inside the handler, output the 'Goal achieved!' string to the console.

The “change” event

Comments

Log in

Sign up

Restore access