Javascript-全局和；局部变量

EDIT2：这是控制台日志。图像正在转换为画布（HTML5），我需要以某种方式将其“返回”到全局变量。建议

<img id="mainIllustration" alt="main illustration" src="Img/Model01.png">
Illust...o_03.js (line 24)
<canvas id="mainIllustration" class="" width="278" height="659" style="" title="" tabindex="-1">
Illust...o_03.js (line 32)
<img id="mainIllustration" alt="main illustration" src="Img/Model01.png">
Illust...o_03.js (line 24)
<canvas id="mainIllustration" class="" width="278" height="659" style="" title="" tabindex="-1">
Illust...o_03.js (line 32)
<img id="mainIllustration" alt="main illustration" src="Img/Model01.png">
Illust...o_03.js (line 24)
<canvas id="mainIllustration" class="" width="278" height="659" style="" title="" tabindex="-1">

但是，当我全局设置变量（eMainIllustration）时，函数的第一个if语句可以工作，但是函数“else”部分的pixastic.revert代码不能工作。为什么?

// eMainIllustration is locally defined
var eMainIllustration = document.getElementById("mainIllustration");
    var eDisplayTableSlideState = false;
    function displayTableSlideIn()
    {
        if (eDisplayTableSlideState === false)
        {
            $("#displayTable").animate ({top: "-=33px", left: "+=66px", width: "-=198px", height: "-=48px"}, 750, "swing",function()
            {
                Pixastic.process (eMainIllustration,"blurfast", {amount: 0.1});
            return (eDisplayTableSlideState = true);
        } else
        {
            $("#displayTable").animate ({top: "+=33px", left: "-=66px", width: "+=198px", height: "+=48px"}, 500, "swing",function()
            {
                Pixastic.revert(eMainIllustration);
            });
            return (eDisplayTableSlideState = false);
        }
    }

我想知道这是否是因为我没有通过函数前半部分（if）中的返回返回已更改（eMainIllustration）的状态。对吗？我将如何实现这一点

---

最好，

如果您发出警报或控制台。将变量记录在函数中会发生什么？在使用函数定义全局变量时遇到了问题

我要说的是DOM可能还没有准备好。尝试使用：

if(window.addEventListener) {
    window.addEventListener('DOMContentLoaded', function() {
        //DOM is now ready. Set your global variables value here.
    });
} else {
    //If internet explorer, use attachEvent method.
}

---

这可能是由于Javascript在页面上的位置造成的

如果您在页面顶部有它，那么在加载javascript之前可能没有加载mainIllustration dom元素

如果将其移动到body标记的正上方，则会填充该变量，因为在加载javascript时dom将完全加载

因此，当调用函数之前加载dom时，它在函数内部工作，但如果它在函数外部则不工作

var eMainIllustration = document.getElementById("mainIllustration");

---

编辑

$（文档）.ready（函数（）{
加载（“路径到javasript”）；
});

我想出来了

如果有人对Pixastic的工作原理有任何疑惑，以下是我的理解，以及我问题的解决方案

pixastic blurfast（&blur）插件“恢复功能”只是将元素恢复到其原始状态。换句话说，您不是在添加其他效果，而是告诉pixastic取消所有更改&将元素替换为其原始状态

请记住，添加pixastic效果后，图像不再是图像，而是HTML5画布元素，在本例中，将取消该元素，并将原始“图像”放回原位

全局变量和局部变量问题通过在函数末尾使用“return”来解决。实际上，这部分不是实际的问题，问题在于我（错误地）尝试实现的恢复实现

---

希望这能帮助到别人。

我想知道为什么这么多人把JavaScript弄得像Java/C:）1）当说“不起作用”时，总是要更明确；2） 在if语句中与布尔值进行比较是一个普遍的反问题-pattern@user1027444，该函数附加到一个按钮上，因此只有用户按下该按钮，该函数才会执行。此外，函数的第一部分工作正常，但是“pixastic.revert”（第二次按下按钮时调用）位fails@Kayote，正如您在他希望的那样，他正在使用getElement。。。关于全局函数。这意味着它没有附加到任何函数或方法。这可能会导致DOM尚未准备好，他将无法获得他正在寻找的内容。抱歉，Dannie，我不理解你的评论。它是全局定义的，所以定义应该是每个函数都可以访问的。这是正确的。但是，当您试图为DOM（html元素）中的某个对象设置全局变量时，这是无法完成的。当您试图使用DOM（存储所有元素的地方）时，它还没有准备好。您必须创建一个等待DOM准备就绪的事件，以便可以找到并使用您想要的元素。尝试了它，但没有任何更改。我也遇到同样的问题，我可以继续使用局部变量，但我真的想知道为什么全局变量不能正常工作。我在body标记的底部加载了js文件，就在body标记关闭之前。我尝试了上面Dannie Hansen建议的eventlistener，但这也无法解决问题。在文档准备好后加载javascript文件如何-请参阅编辑的应答谢谢@Nicholas Murray，我使用的是DOMContentLoaded函数，我想与ready函数基本相同。请参阅文章顶部的“我的编辑1”。

var eMainIllustration = document.getElementById("mainIllustration");

<script type="text/javascript">
    $(document).ready(function() {
        load("path_to_javasript");
     });
</script>