CODEWITHSUNDEEP
javascriptvariablesaddeventlistener
Joanna
Joanna

Reputation: 289

Variables defined in addEventListener JavaScript

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!

Upvotes: 3

Views: 5669

Answers (5)

Abk
Abk

Reputation: 2233

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

Upvotes: 4

Jonas F.
Jonas F.

Reputation: 44

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

Upvotes: -1

Dekel
Dekel

Reputation: 62556

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.

Upvotes: 1

Tyler
Tyler

Reputation: 90

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.

Upvotes: 0

Eugene Beliaev
Eugene Beliaev

Reputation: 871

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.

Upvotes: 1

Related Questions