Variables defined in addEventListener JavaScript

Question

I have the code below in the beggining of my JS scirpt. When I try to print any of defined variables below that code, the console says that variables are not defined. Can you tell me why? Maybe I should call the funtion first? When I define variable below and then print it to the console, it works fine.

Here is the code:

 document.addEventListener("DOMContentLoaded", function(){
     var homeElement = document.getElementById("home");
     var childElements = document.querySelector(".oferts").children;
     var banner = document.querySelector(".ban");
     var blocks = document.querySelectorAll(".block");
     var links = document.querySelector(".links").children;

 });

 console.log(homeElement); //Here I got info that this variable is not defined

Thanks in advance for your help!

because console.log line is executed before the DOM is ready and your listener is called. Also, your variables seem to be locally scoped for that handler. — Vladimir M, Oct 23 '16 at 11:57

score 4 · Accepted Answer · edited May 23 '17 at 10:29

4

Your variables were defined locally and cannot be accessed outside the function.

You can remove the var keyword to make the variables global and you will be able to call the variable anywhere in the script.

Read about JavaScript scope

Javascript local and global variable confusion

Demystifying JavaScript Variable Scope and Hoisting

JavaScript Scope

edited May 23 '17 at 10:29

Community

1
1

answered Oct 23 '16 at 12:09

Abk

2,137
1
23
33

score 1 · Answer 2 · answered Oct 23 '16 at 11:58

Try to log your variable inside of function

document.addEventListener("DOMContentLoaded", function(){
     var homeElement = document.getElementById("home");
     var childElements = document.querySelector(".oferts").children;
     var banner = document.querySelector(".ban");
     var blocks = document.querySelectorAll(".block");
     var links = document.querySelector(".links").children;

     console.log(homeElement);// <--
 });

Your issue occures beacuse homeElement doesn't defined in outer scope.

score 1 · Answer 3 · answered Oct 23 '16 at 11:59

You've got two problems here:

The var X inside the scope set that variable as local variable (and not global) so you can't use it outside the scope.
You can set the variable to global if you use var X in the global and only X = ... inside the scope.
Based on your code - the console.log function runs before the function in the callback of addEventListener, so at the time of running - the variable was not set, yet.

score 0 · Answer 4 · answered Oct 23 '16 at 11:59

That's because the variables are being created in the scope of the event listener's function, while console.log is executed in the global scope. The global scope does not have access to the variable scope.

You can either move the console.log into the function, or declare the variables outside the function.

score -1 · Answer 5 · answered Oct 23 '16 at 12:04

-1

You create your variables inside your function so they are only accessable inside of it.

To make global accessable variables you can simply change it to the following:

 var homeElement;
 var childElements;
 var banner;
 var blocks;
 var links;

 document.addEventListener("DOMContentLoaded", function(){
   homeElement = document.getElementById("home");
   childElements = document.querySelector(".oferts").children;
   banner = document.querySelector(".ban");
   blocks = document.querySelectorAll(".block");
   links = document.querySelector(".links").children;
 });

 console.log(homeElement);

answered Oct 23 '16 at 12:04

Jonas F.

44
3

Actually I wrote this answere while other ones were written. I read other answeres after I posted mine. What's wrong with my answere? – Jonas F. Oct 23 '16 at 12:11
Didn't say it was wrong, only that when you posted it there were already 3 answers saying that (and at least one of them saying that). – Dekel Oct 23 '16 at 12:19

Variables defined in addEventListener JavaScript

5 Answers5