> For the complete documentation index, see [llms.txt](https://ga0-2.gitbook.io/seifxr10anz-content/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ga0-2.gitbook.io/seifxr10anz-content/day-2-functions-and-event-handlers-review/event-handlers-review.md).
# Event handlers review
Lets review our understanding of event handlers by updating the sample code.
{% code title="index.html" %}
```html
```
{% endcode %}
{% code title="index.css" %}
```css
.square {
width: 50px;
height: 50px;
border: 1px solid black;
margin: 5px;
}
```
{% endcode %}
{% code title="index.js" %}
```javascript
const square1 = document.getElementById("square1");
square1.addEventListener("click", (event) => {
if (square1.style.backgroundColor == "green") {
square1.style.backgroundColor = "white";
} else {
square1.style.backgroundColor = "green";
}
});
const square2 = document.getElementById("square2");
square2.addEventListener("click", (event) => {
if (square2.style.backgroundColor == "green") {
square2.style.backgroundColor = "white";
} else {
square2.style.backgroundColor = "green";
}
});
```
{% endcode %}
* Passing around a function as a variable
* Copy the function to a new variable name and then call it
* What do you see when you `console.log` the variable?
* Modify the above example to have one `turnGreenWhenClicked` function that uses `event.target` to determine what was clicked.
* What if I rename the variable something other than `event`?
* Make it a loop using `document.getElementByClassName('square')`
* Use the same `turnGreenWhenClicked` function
* Change it back to an inline function - do we need to use `event.target` anymore?
* Passing around elements as variables (pass into function, return from function)
* Make a `turnGreen` function, pass in the element you want to turn green
## Timer functions
### setTimeout
The `setTimeout()` method calls a function after a number of milliseconds. It will be called only once.
#### Syntax
```
myTimeout = setTimeout(function, milliseconds);
```
#### Example
Try running the following code in your browser console
```javascript
setTimeout(() => console.log("Hello world!!"), 5000);
```
### setInterval
The `setInterval()` method calls a function at specified intervals (in milliseconds).
#### Syntax
```
myInterval = setInterval(function, milliseconds);
```
#### Example
Try running the following code in your browser console
```javascript
setInterval(() => console.log("Hello world!!"), 5000);
```
{% hint style="info" %}
Now that we have an understanding of how timer functions work. Lets try updating the code to clear the green color from the element after a fixed amount of time.
{% endhint %}