Databases
StackOverflow2013
Postsdbo
POJavascript - confusion between global & local variable
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript - confusion between global & local variable
    text
    copied!<p><strong>EDIT2</strong>: Here is the console log. The image is being converted to canvas (HTML5), I need to 'return' this to the global variable somehow. Suggestions?</p> <pre><code>&lt;img id="mainIllustration" alt="main illustration" src="Img/Model01.png"&gt; Illust...o_03.js (line 24) &lt;canvas id="mainIllustration" class="" width="278" height="659" style="" title="" tabindex="-1"&gt; Illust...o_03.js (line 32) &lt;img id="mainIllustration" alt="main illustration" src="Img/Model01.png"&gt; Illust...o_03.js (line 24) &lt;canvas id="mainIllustration" class="" width="278" height="659" style="" title="" tabindex="-1"&gt; Illust...o_03.js (line 32) &lt;img id="mainIllustration" alt="main illustration" src="Img/Model01.png"&gt; Illust...o_03.js (line 24) &lt;canvas id="mainIllustration" class="" width="278" height="659" style="" title="" tabindex="-1"&gt; </code></pre> <p><strong>EDIT 1</strong>: 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?</p> <p><strong>ORIGINAL MESSAGE :</strong></p> <p>All,</p> <p>Im using pixastic library and am getting very confused by a seemingly very simple thing, global/ local variable.</p> <p>I have below two sets of code, one in which the variable is globally defined (ultimately what I want) &amp; another in which the variable is locally defined.</p> <p>The first code below works fine, the variable (eMainIllustration) is locally defined and the function works well.</p> <pre><code> 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); } } </code></pre> <p>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?</p> <pre><code>// 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); } } </code></pre> <p>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?</p> <p>Best,</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload