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!

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!

• javascript
• variables
• addeventlistener

• 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 Commented Oct 23, 2016 at 11:57

5 Answers 5

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

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.

You've got two problems here:

1. 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.

2. 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.

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.

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);