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!
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.
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.
链接地址: http://www.djcxy.com/p/51670.html