CODEWITHSUNDEEP
javascriptdom
Ian C.
Ian C.

Reputation: 78

Simple question about using functions and invoking them

Pretty basic question, but I'm not able to find a suitable answer anywhere as I'm not sure what verbiage to use. I'm trying to better understand what is happening here so I can keep myself from making this mistake again. As you can see on the last line, I'm trying to set the onclick event, but it immediately invokes the function. The solution is to remove the parenthesis, but what exactly is that doing? What is the difference between the two? Thanks for any help.


let element = document.querySelector("button");

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

element.onclick = turnButtonRed();

Upvotes: 0

Views: 54

Answers (2)

user47589
user47589

Reputation:

In the statement element.onclick = turnButtonRed(); you are assigning the result of calling turnButtonRed, not that function itself. Simply remove the ().

Here is why. I refer you to the mighty Table of Operator Precedence!

Your line of code has two operators, assignment and function call. Let's see:

  • Function call is 20
  • Assignment is 3

We do things in operator precedence order, from highest to lowest. So what is happening is, you are evaluating the function call turnButtonRed() first, then assigning that result to the handler. Which isn't what you want.

Just remove the function call, and assign the function:

 element.onclick = turnButtonRed;

Here, we are not calling the function. Instead we assign the function itself as an event handler.

Now, the preferred, modern way of doing this is to add an event handler:

 element.addEventListener("click", turnButtonRed);

I leave it as an exercise to the reader to explore why this might be preferred.

Upvotes: 1

TKoL
TKoL

Reputation: 13912

think of turnButtonRed as a variable.

var turnButtonRed = function(){ return 2 };

Now, if you use that variable to pass it to onclick, for example, you have 2 possibilities

element.onclick = turnButtonRed; // this is setting onclick to a function
element.onclick = turnButtonRed(); // this is setting onclick to whatever the function returns (2 in this case).

You want onclick to be set to a function, not the result of a function. turnButtonRed() gives you the result of the function, turnButtonRed is the function itself.

Upvotes: 1

Related Questions