JavaScript
Adding a task
Take the input value with addEventListener and click event and add a task.
Reading the input value
To get the task text the user typed, we use the input.value property. It's both a getter and a setter: we can clear the field by assigning to it (input.value = "").
We'll define an addTask function. It first reads the text with input.value; if it's empty, it does nothing. Otherwise it creates a new li element, sets the text, and appends it to the list. Finally it clears the input field.
We'll bind this function to the button with addButton.addEventListener("click", addTask).
Binding a click to the button
After writing the function, we must bind it to the button's click event. The addEventListener method takes an event type and a function. The call addButton.addEventListener("click", addTask) runs the addTask function on every click.
We don't call the function ourselves (we write addTask without parentheses); the browser calls it. This is the callback pattern: we hand a function to something else and let it call it.
To avoid adding empty text, we'll exit early with if (text === "") return;.
Exercise Wire up the add-task feature
Continue on top of the previous lesson's solution. Write an addTask function: read the text with input.value, return if empty, otherwise create an element with createElement("li"), set textContent, append with list.appendChild, and clear input.value. Then bind it to the button with addButton.addEventListener("click", addTask).
Show example solution
read input.value, return if empty, create an li, append with list.appendChild, then clear input.value. Finally add addButton.addEventListener('click', addTask).
Example solution:
// Todo application
const app = document.getElementById("app");
const title = document.createElement("h1");
title.textContent = "Todo list";
app.appendChild(title);
const input = document.createElement("input");
input.placeholder = "New task";
const addButton = document.createElement("button");
addButton.textContent = "Add";
const list = document.createElement("ul");
app.appendChild(input);
app.appendChild(addButton);
app.appendChild(list);
function addTask() {
const text = input.value;
if (text === "") return;
const item = document.createElement("li");
item.textContent = text;
list.appendChild(item);
input.value = "";
}
addButton.addEventListener("click", addTask);
Test yourself
-
Read the input value
const text = ____;
Show answer
const text = input.value;
-
In addButton.addEventListener('click', addTask), why is addTask written without parentheses?
addButton.addEventListener("click", addTask);
- Because we want the browser to call the function itself
- Because writing parentheses is a syntax error
- Because addTask is a function, not a variable
- Because the click count doesn't matter
Show answer
Because we want the browser to call the function itself — Correct! Without parentheses, the browser calls the function.
-
Match the addTask steps
- input.value
- Read the text
- return
- Exit if empty
- createElement("li")
- Create element
- list.appendChild
- Add to list
Next lesson: Completing and deleting a task - DOM
