title: JavaScript object not working
body: <p>I am facing a problem with JavaScript objects. I have some text on a page which should converts into textfield when clicked. The problem is that when I click the text the console displays the error message </p>
  
  <blockquote>
    <p>"textNode not defined or null and tn is not defined". </p>
  </blockquote>
  
  <p>Please help, I want to solve this problem in a way so that I don't have to move the JavaScript code to any other location from head tag.</p>
  
  <p>Here is 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;
  function preload()
  {
  if(!tn) var tn=new Object();
  tn.variables=
  {
  textboxNode: document.getElementById('textbox'),
  textNode: document.getElementById('text'),
  textValue: textNode.firstChild.nodeValue,
  doneButton: document.getElementById('done')
  };
  }
  
  function change()
  {
  tn.variables.textboxNode.setAttribute('value', textValue);
  tn.variables.textNode.style.display = 'none';
  tn.variables.textboxNode.setAttribute('type','text');
  tn.variables.doneButton.setAttribute('type','button');
  }
  function changeBack()
  {
  tn.variables.textNode.firstChild.nodeValue = textboxNode.value;
  tn.variables.textNode.style.display = 'block';
  tn.variables.textboxNode.setAttribute('type', 'hidden');
  tn.variables.doneButton.setAttribute('type','hidden');
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload= "preload()"&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>Thanks in advance.</p>