# 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 %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://ga0-2.gitbook.io/seifxr10anz-content/day-2-functions-and-event-handlers-review/event-handlers-review.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.