Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Select a Page Element By Its ID

I'm really confused about the function in this code

Hello, I'm confused why do i need a function to do something when the button is clicked instead of just telling it what to do with the code inside the function directly. And why doesn't the function have any name in the first place? I mean what is the point of this function right here, if he doesn't even call it. Thank you.

2 Answers

Michael Hulet
Michael Hulet
47,881 Points

Guil may not call that function directly, but JavaScript calls that function whenever the button is clicked. It doesn't have a name because it doesn't need one, but it's perfectly alright if you want to give it one, too

The addEventListener method takes 2 arguments:

  1. The event to listen for
  2. A function that JavaScript runs when the event happens

So, in total, this snippet:

myButton.addEventListener("click", () => {
    myHeading.style.color = myInputText.value;
});

adds an event listener on myButton that will call the anonymous function passed as the 2nd argument whenever the button is clicked. That function will set myHeading's color to be the value of myInputText.

You can also name this function, if you want to. This snippet is still totally valid and does the same thing:

const clickHandler = () => {
    myHeading.style.color = myInputText.value;
};

myButton.addEventListener("click", clickHandler);

The only difference between the 2 snippets I've posted so far is that the function that's called whenever myButton is clicked is now named clickHandler

Now, let's look at the case where we don't use a function for the click handler. This is what I think you're visualizing:

myButton.addEventListener("click");

myHeading.style.color = myInputText.value;

Now, if we run this code, 2 things will happen as soon as the page loads:

  1. JavaScript will throw a TypeError because not enough arguments were passed to addEventListener
  2. myHeading's color will be set to an empty string

Notably, this will also cause nothing to happen whenever the button is clicked. That's because when code is in the global scope like this, JavaScript will read the file from top to bottom and execute every command immediately, as soon as the file is loaded. Putting this line:

myHeading.style.color = myInputText.value;

into a function and passing that function to addEventListener captures that line of code and tells JavaScript not to run it immediately, but to hang onto it and run it whenever the button is clicked. That's why addEventListener takes 2 arguments. It needs to know:

  1. What event to listen for
  2. What code to run whenever that event happens The way you do that is by telling it the event to listen for as a string, and then passing the code you want to run whenever that event happens as a function that it can call when the event happens

thank you sir, this was a perfect answer for me