# change event in JavaScript

In this lesson, you and I will analyze the `change` event that occurs in input fields when they change. What does it mean? Let, for example, you have an input and there is some text in it. If you change this text, then this event will occur in this case.

Let's look at an example. Let us have an input:

`<input id="elem" value="text">`

Let's output its new value to the console after changing it:

`let elem = document.querySelector('#elem'); elem.addEventListener('change', function() { console.log(this.value); });`

Given an input and a paragraph. After changing the input, display its text in a paragraph.

Given a checkbox. When the checkbox changes, display its new state on the screen.

Explain the difference between blur and change events.

Given an input. By changing it, check if the number of characters in it is less than `5` or not. If less - color the border of the input green, and if more - red.

←→
↑
en ru