在addEventListener中定義的變量JavaScript

Question

我在我的JS scirpt的開始部分有下面的代碼。當我嘗試在該代碼下面打印任何定義的變量時，控制檯說變量沒有被定義。你能告訴我爲什麼嗎？也許我應該先打電話給功能？ 當我在下面定義變量並將其打印到控制檯時，它可以正常工作。

下面是代碼：

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 

預先感謝您的幫助！

Answer 1

你的變量本地定義，不能在函數外訪問。

您可以刪除var關鍵字以使變量成爲全局變量，您將可以在腳本的任何位置調用變量。

閱讀關於JavaScript的範圍

Javascript local and global variable confusion

Demystifying JavaScript Variable Scope and Hoisting

JavaScript Scope

Answer 2

嘗試登錄的功能

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

您的問題occures怎麼一回事，因爲homeElement不會在外部範圍內定義您的變量。

Answer 3

這是因爲變量是在事件偵聽器函數的範圍內創建的，而console.log是在全局範圍內執行的。全局作用域不能訪問變量作用域。

您可以將console.log移動到函數中，也可以在函數之外聲明變量。

Answer 4

你來到這裏兩個問題：

1. 設置該變量作爲局部變量（而不是全局）範圍內的var X，所以你不能用它的範圍之外。
   如果在全局範圍內使用var X，並且範圍內只使用X = ...，則可以將變量設置爲全局。

2. 根據您的代碼 - console.log函數在addEventListener的回調函數之前運行，所以在運行時 - 變量尚未設置。

Answer 5

您可以在函數內部創建變量，以便它們僅在其內部可訪問。

，使全球accessable變量，你可以簡單地將其更改爲以下：

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