---
title: On Change Events in HTML
author: Brad Kuhnle
description: Learn about handling "change" events in HTML with JavaScript.
published: 2025-01-25
---
# On Change events
if you would like the sample code i used when making this you can find it below:
```html
Test
```
When dealing with on change events, you need to be sure to wait for the window to load. You can do so by using the code below:
```js
window.addEventListener("load",()=>{
//you will put all your code in this block.
});
```
Then you will have to get a handle on the elements you would wish to detect and change.
```js
//input element:
const txtBox = document.querySelector("[type='text']");
//output element:
const cDiv = document.querySelector(".change");
//if you just want to console.log() the response omit the line above.
```
You can use the code above to do this task. Then you will need an event listener that uses the `change` event. The code below will do this job:
```js
txtBox.addEventListener("change", () => {
//within this block you will put what you wish to exicute when the event happens.
});
```
After this you can trigger anything you wish. As an example, I made this sample code:
```js
//if you want to console.log():
console.log("hello");
//if you want to cange the output div:
cDiv.innerHTML = "We got your input!!";
```
After it is all said and done, if you type anything into the text box, it will do what you tell it to do.