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

尝试在函数

中记录变量

    $model = new \yii\base\DynamicModel([
        'role', 'from_rm', 'to_rm', 'user1_subdistrcts'
    ]);
    $model->addRule('from_rm', function ($attribute, $params) use ($model) {
        $model->addError($attribute, 'Please Select Regional Manager.');
    }, [
        'skipOnEmpty' => false,
    ]);

    $model->validate();
    var_dump($model->getErrors());

您的问题发生，因为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);// <-- });未在外部范围内定义。

Answer 3

这是因为变量是在事件监听器函数的范围内创建的，而console.log是在全局范围内执行的。全局范围无权访问变量范围。

您可以将console.log移动到函数中，也可以在函数外部声明变量。

Answer 4

您可以在函数内创建变量，这样它们只能在其中访问。

要创建全局可访问变量，您只需将其更改为以下内容：

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

Answer 5

你有两个问题：

范围内的var X将变量设置为局部变量（而不是全局变量），因此您无法在范围之外使用它。
如果您在全局范围内使用var X且范围内只有X = ...，则可以将变量设置为全局。
根据您的代码 - console.log函数在addEventListener的回调函数之前运行，因此在运行时 - 该变量尚未设置。

addEventListener JavaScript中定义的变量

5 个答案: