Introduce Javascript functions before event handler

[rgaiacs]

At 05-javascript.md we have

Using getElementById, we can grab the element from document (a magical object representing the entire page) and work with it in the JavaScript file.

var cat_image = document.getElementById('cat');

Now we want to detect if someone clicks on the cat image. Event listeners help us by constantly checking if someone performs a certain action.

var cat_image = document.getElementById('cat');
cat_image.addEventListener("click", meow);

Our event listener takes two arguments: the type of event and what we want it to do. We want to execute a function called meow(), which will open a pop-up window. We can use the JavaScript function alert().

function meow() {
   alert("Meow!");
};

I think that is better to introduce the Javascript function at the begin. So maybe replace the previous text with something like

We what to open a pop-up window when the user click on the image. We can use the JavaScript function alert() to create the pop-up window. So let's start creating a function to perform the action that we want.

function meow() {
   alert("Meow!");
};

Now that we have our function we need to get the image. Using getElementById, we can grab the element from document (a magical object representing the entire page) and work with it in the JavaScript file.

var cat_image = document.getElementById('cat');

Now we want to detect if someone clicks on the cat image. Event listeners help us by constantly checking if someone performs a certain action and we can add our functions to be perform when the event is trigger.

cat_image.addEventListener("click", meow);

Our event listener takes two arguments: the type of event and the function to execute.