Javascript-全局和局部变量之间的混淆

Question

EDIT2 : Here is the console log. The image is being converted to canvas (HTML5), I need to 'return' this to the global variable somehow. Suggestions?

<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">

EDIT 1 : I am starting to wonder whether the issue is with Pixastic, the fact that its manipulating the image, which I need to return back to the global image variable (eMainIllustration). How would I achieve this?

ORIGINAL MESSAGE :

All,

Im using pixastic library and am getting very confused by a seemingly very simple thing, global/ local variable.

I have below two sets of code, one in which the variable is globally defined (ultimately what I want) & another in which the variable is locally defined.

The first code below works fine, the variable (eMainIllustration) is locally defined and the function works well.

    var eDisplayTableSlideState = false;
    function displayTableSlideIn()
    {
// eMainIllustration is locally defined
        var eMainIllustration = document.getElementById("mainIllustration");
        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);
        }
    }

However, when I set the variable (eMainIllustration) globally, the first if statement of the function works, however the pixastic.revert code in the 'else' part of the function does not. Why?

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

I wonder if this is because I am not returning the state of the changed (eMainIllustration) via return in the first half (if) of the function. Is that correct? And how would I achieve this?

Best,

Answer 1

What happens if you alert or console.log the variable out inside the function? Had my issues with defining global variables using functions.

Where i am going with this is that the DOM might not the ready. Try the use of:

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

Answer 2

This is probably due to the location of your Javascript on the page.

If you have it at the top of your page then the mainIllustration dom element may not have loaded before the javascript is loaded.

If you move it to just above the body tag then the variable will be populated as the dom will be fully loaded by the time the javascript loads.

Thus it works when inside the function as the dom is loaded before you call the function, but does not work if it is outside the function.

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

---

Edit

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

Answer 3

I figured this out.

In case anyone has any confusion of how Pixastic works, here is what my understanding, along with a solution to my problem.

The pixastic blurfast (& blur) plugin 'revert function' merely reverts the element back to its original state. In other words, you are not adding another effect but telling pixastic to cancel all the changes & replace the element with its original state.

Keep in mind that when a pixastic effect is added, the image is no longer an image but a HTML5 canvas element, which in this case, is being canceled and the original 'image' being put back in place.

The global variable & local variable problem with resolved by using the 'return' at the end of the function. Actually, this part was not the actual problem, the problem was with the revert implementation I (wrongly) was trying to implement.

Hope this helps someone.