Adding a task
- JavaScript course
- Intermediate
- Lesson 51/134
- 5 min
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;.
Practice 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).
Starter code
// 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);
// Wire up the add-task feature
// Add a click listener on addButton, read the input value, create an li, and append itSample 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);Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Read the input value
const text = ____;const text = input.value;Explanation: input.value gives the input field's value.
2 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 Correct answer
- Because writing parentheses is a syntax error
- Because addTask is a function, not a variable
- Because the click count doesn't matter
Explanation: Without parentheses, the browser calls the function.
3 Match the addTask steps
| Term | Meaning |
|---|---|
input.value |
Read the text |
return |
Exit if empty |
createElement("li") |
Create element |
list.appendChild |
Add to list |