Global variable called "undefined" inside of a function
<p>Why, oh why, do I get "undefined" on the following Javascript code? </p>

<p>I have 2 functions. The first is called onmouseover, and it updates a global variable that is a reference to the DOM element that we just mouseovered. I want to highlight the DOM element while it is the current reference, so I change its backgroundColor and its border. However, once I mouseover the next DOM element, I will want to reset the backgroundColor and border to their original state (of the previous DOM element that we just left). </p>

<p>In the second function, called inside the first, I try to save some of the style info of this global reference. However, inside of this second function, when I try to use the variable, which is currentEditingReference, I'm told that the variable is "undefined". </p>

<p>I redid the code where the variable "currentEditingReference" is handed into the 2nd function as an argument, and given a different name inside of that function, but I still get the same error, which is "undefined". Here is the error as FireBug shows it to me:</p>

<pre><code>currentEditingReference is undefined
backupStyleInfoObject.backgroundColor = currentEditingReference.style.backgroundColor; 
Line 313
</code></pre>

<p>I find this amazing. I'm not sure if I'm running into some odd feature of Javascript's scope rules, or if this is some kind of copy-by-reference problem. </p>

<p>In the 2nd function, storeTheOriginalCssAttributesOfThisDomElement, currentEditingReference seems to be treated as a local variable even though I define it at the top of the page, in the global space, as:</p>

<pre><code>var currentEditingReference = null;
</code></pre>

<p>I should not get "undefined" on a variable that I have defined as null. Null and undefined are 2 different types in Javascript. </p>

<p>I have dozens of functions where I use currentEditingReference as a global variable, but for some reason, in this one function, I can not seem to use it as such. Why?</p>

<p>Formatting the code to show up on StackOverflow turned out to be a hassle, so I posted the code here:</p>

<p><a href="http://www.krubner.com/stackoverflow.html" rel="nofollow">http://www.krubner.com/stackoverflow.html</a></p>

<p>UPDATE:</p>

<p>Is it possible that FireFox errors are simply wrong? I am now getting "currentEditingReference is undefined" on the 4th line here, which should be impossible since currentEditingReference was defined just 3 lines before. </p>

<p>currentEditingReference = eventTargetRef;</p>

<p>currentEditingReference = addUniqueIdToAnElement(currentEditingReference);</p>

<p>var newObjectToStoreDataFromCurrentReference = new Object(); </p>

<p>newObjectToStoreDataFromCurrentReference.style = currentEditingReference.style; </p>

<p>newObjectToStoreDataFromCurrentReference.id = currentEditingReference.id;       </p>

<p>storeTheOriginalCssAttributesOfThisDomElement(newObjectToStoreDataFromCurrentReference); </p>

<p>UPDATE:</p>

<p>I figured out the problem: when you return a global from a function, you basically overwrite the global. Because others will probably suffer from this in the future, I wrote up an example here:</p>

<p><a href="http://www.krubner.com/javascript_scope_example.html" rel="nofollow">http://www.krubner.com/javascript_scope_example.html</a></p>
