JavaScript object not working

Question

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

"textNode not defined or null and tn is not defined".

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.

Here is my code:

<!DOCTYPE HTML>
<html>
<head>
<title>Span to Text Box - Demo - DOM</title>
<script type="text/javascript" language="javascript">
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');
}
</script>
</head>

<body onload= "preload()">
<p id="text" onClick="change()">Click me!</p>
<form onSubmit="return false;">
  <input type="hidden" id="textbox" />
  <input type="hidden" id="done" onClick="changeBack()" value="Done" />
</form>

</body>
</html>

Thanks in advance.

WHAT SHOULD EVERY JAVA-SCRIPT PROGRAMMER KNOW? I want to share this most useful post with all my Freinds here. Here is the Link: http://stackoverflow.com/q/2628672/1067051 — Naeem Ul Wahhab, Nov 30 '11 at 15:24

Shadow The GPT Wizard · Accepted Answer · 2011-11-27T09:17:11.880

The object tn is local to the preload function.

Define it as global variable instead:

var tn = new Object();
function preload()
{
    tn.variables=
    {
        //....
    }
}

Also, you can't get other property value when you just define the object.

Change textValue to be a function instead:

tn.variables =
{
    textboxNode: document.getElementById('textbox'),
    textNode: document.getElementById('text'),
    textValue: function() {
        return this.textNode.firstChild.nodeValue;
    }, 
    doneButton: document.getElementById('done')
};

Then invoke it as function as well, for example:

tn.variables.textboxNode.setAttribute('value', tn.variables.textValue());

score 1 · Answer 2 · answered Nov 27 '11 at 09:09

i think your tn variable is not correctly set in a global scope. Try to modify the top of your javascript like this:

<script type="text/javascript" language="javascript">
var tn = null;
function preload()
{
   if(!tn) 
   {
      tn=new Object();
   }
   tn.variables=
   {
     textboxNode: document.getElementById('textbox'),
     textNode: document.getElementById('text'),
     textValue: textNode.firstChild.nodeValue,
     doneButton: document.getElementById('done')
   };
}

score 1 · Answer 3 · answered Nov 27 '11 at 09:10

1

to begin with, define tn globally - outside the scope of preload

answered Nov 27 '11 at 09:10

Lloyd

8,204
2
38
53

no probs.. best of luck with the software.. have you tried the Javascript debugger in the Safari / Chrome Developer Tools? Or Firebug on Firefox? Useful stuff.. – Lloyd Nov 27 '11 at 16:29

JavaScript object not working

3 Answers3