title: Javascript Global Variables Not Working as expected. Help?
body: <p>I am new to Javascript. I am facing a problem with global variables. I can't figure out that why the global variables are not working as the code looks ok. Please Help me solve this problem.
  I will breifly explain the code first.I have some text on a page which changes to text field when clicked. When I define the variables inside the functions body the code starts working fine. When these variables are defined globally as in the following code, the console displays this error: the variable is not defined. Here my code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Span to Text Box - Demo - DOM&lt;/title&gt;
  &lt;script type="text/javascript" language="javascript"&gt;
  var textNode = document.getElementById('text');
  var textValue = textNode.firstChild.nodeValue;
  var textboxNode = document.getElementById('textbox');
  var doneButton = document.getElementById('done');
  function change()
  {
     textboxNode.setAttribute('value', textValue);
     textNode.style.display = 'none';
     textboxNode.setAttribute('type','text');
     doneButton.setAttribute('type','button');
  }
  function changeBack()
  {
     textNode.firstChild.nodeValue = textboxNode.value;
     textNode.style.display = 'block';
     textboxNode.setAttribute('type', 'hidden');
     doneButton.setAttribute('type','hidden');
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;p id="text" onClick="change()"&gt;Click me!&lt;/p&gt;
  &lt;form onSubmit="return false;"&gt;
    &lt;input type="hidden" id="textbox" /&gt;
    &lt;input type="hidden" id="done" onClick="changeBack()" value="Done" /&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please Help!
  Thanks in Advance.</p>