Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by DATA DEER
DATA DEER
18,940 Points

Difference Between calling a function and calling a function inside a function.

I'm currently following the course "AJAX Basics" and ran into a small problem. In the 5fth part of the course, "A Simple AJAX Example", Dave told me to put the "xhr.send()" method inside a function so i'd be able to call it on a specific event. So i did that and bind it to a click event. When refreshing the page i was quite surprised that the program totally ignored the fact that i had to click the button before executing the sendAJAX() function.

Here is a little code snippet for visualization.

var AJAX = new XMLHttpRequest(); 
AJAX.onreadystatechange = function (){

    if(AJAX.readyState === 4){ 
        document.getElementsByClassName("AJAX-output")[0].innerHTML = AJAX.responseText;

    }
}; //Initialization of the AJAX variable

AJAX.open("GET", "extraContent.html"); //This is the html content i wanted to add

var sendAJAX = function(AJAXVar){ //Function to add AJAX content on an event

    AJAXVar.send();

}

document.getElementById("getName").addEventListener("click", sendAJAX(AJAX)); //function to call AJAX Content on click

This is my html where the AJAX content is supposed to go.

<div class="AJAX-output"> 
    <a id="getName"> GET AJAX</a>
</div>

If i replace the last function with the code below, it works, but why ? (i added an anonymous function before i call the sendAJAX function);

document.getElementById("getName").addEventListener("click", function(){ 
    sendAJAX(AJAX); //function to call AJAX Content on click
});

Where's the huge logical difference between these two code fragments ?

document.getElementById("getName").addEventListener("click", sendAJAX(AJAX));//function to call AJAX Content on click

I am grateful for any help :)

1 Answer

Samuel Webb
Samuel Webb
25,370 Points

For a short answer, the problem is that you were invoking a function as the argument to .addEventListener instead of passing it a function. When the JavaScript engine sees a word with parenthesis after it, that means it will run or invoke that function right then and there then return a value or undefined. What was happening was you were actually passing the return value of the sendAJAX function and it was probably undefined.

Example: .addEventListener("click", undefined);

You don't want to invoke a function as a parameter to .addEventListener because you want the function to be invoked when the "click" event happens (in your case). That's why passing it an anonymous function (that isn't being invoked) worked.

DATA DEER
DATA DEER
18,940 Points

Thanks for your response. Now i understand why it didn't work properly :)

Samuel Webb
Samuel Webb
25,370 Points

No problem. Glad to help.