Interactive online courses HTML Academy
2026-03-09 14:05 Diff
https://htmlacademy.org/courses/javascript-basics/dynamic-element-styles/onchange-oninput-compare

We learned how to change the font size in an article when a user moves the slider. But it can be inconvenient when using our current configuration because the text will change too dramatically. This is because the onchange event handler is only triggered when the user releases the slider after moving it. As a result, the text only changes once, and it can be abrupt.

In order for the text to change more smoothly, we need to change the font size many times, but gradually. To do this, you need to obtain a new value each time the position of the slider is changed. The oninput event handler can help us do this. We already worked with it in one of the previous chapters.

Let’s figure out what the difference is between the two handlers:

  • onchange is triggered if the value of the input field has changed and the user has finished entering input. For example, if the user moved the slider and released it, or if they entered something in the text field but then moved the cursor away from it.
  • oninput is triggered for every change of value regardless of whether the user finished entering text or not. For example, it is triggered for every change of position of the slider, even if the user continues to move it. Similarly, it is triggered for every new character that is entered in the text field, even if the user continues to enter text.

Let’s make it pleasanter to adjust the font size. To do this, change the onchange handler to oninput. After that, make sure that the text in the article changes smoothly and not abruptly.

When we change the size of elements, the browser must redraw the page. This is a resource-intensive operation, and it should be performed as rarely as possible. Use the oninput handler carefully.

You can learn about how the browser handles various changes and animations by reading this article.