Interactivity with onclick

Simple question. Here’s the exercise to it: Interactivity with onclick

element.onclick = turnButtonRed;

turnButtonRed seems to be a variable, right? if so, why (the ■■■■) is the following function assigned to this variable?

function turnButtonRed (){
  element.style.backgroundColor = "red";
  element.style.color = "white";
  element.innerHTML = "Red Button";
}

I could understand, if the function had been assigned to a variable like this before:

const turnButtonRed = function turnButtonRed (){
  element.style.backgroundColor = "red";
  element.style.color = "white";
  element.innerHTML = "Red Button";
}

element.onclick = turnButtonRed;

I believe you are asking why it is written as a variable and not as a function correct ?

The reason element.onclick = turnButtonRed; is accepted is because element.onclick expects a function. It does not matter if this function is written like in your first example or set like in your second example.
Because its going to accept only a function anyway, Javascript does not really care as to how you write it down.
Both element.onclick = turnButtonRed; and element.onclick = turnButtonRed(); should work on your first example.

Your second example i believe only accepts element.onclick = turnButtonRed; since the function is put in a variable.

This is the conclusion i made after testing this. Hope it clears things up.

2 Likes

Thanks so much! Sounds logical to me that element.onclick expects a function.