6

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:

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

<body>
<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>

Please Help! Thanks in Advance.

Improve this question
3
  • 1
    While not directly related to your question, please don't use global JavaScript variables like this - but make sure they're namespaced. More details at blogger.ziesemer.com/2007/10/… . Commented Nov 26, 2011 at 18:37
  • 1
    @ziesemer thanks I have read the article you recommended Commented Nov 27, 2011 at 8:33
  • WHAT SHOULD EVERY JAVA-SCRIPT PROGRAMMER KNOW? I want to share this most useful post with all my Freinds here. Here is the Link: stackoverflow.com/q/2628672/1067051 Commented Nov 30, 2011 at 15:19

2 Answers 2

Reset to default
5

As Adam said, the issue is that you are running javascript on the document before the document has been loaded. There are a number of ways to fix this, but the simplest is to just move your javascript code to the end of the body so the document has already been parsed and is ready before your code runs like this:

<!DOCTYPE HTML>
<html>
<head>
<title>Span to Text Box - Demo - DOM</title>
</head>

<body>
<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>

<script type="text/javascript" language="javascript">
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');
}
</script>

</body>
</html>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

jfriend00 Thanks your reply really helped me to figure out the problem. It's so nice of you guys
4

The error is likely caused by grabbing DOM nodes before they're ready:

var textNode = document.getElementById('text');

This is likely returning either null or undefined since that DOM element hasn't been created yet.

Putting this script at the end of your body should solve your problem.

Or, if you'd like to use jQuery, you can do all this in 

$(document).ready(function() {
    var textNode = document.getElementById('text');
}
Improve this answer

7 Comments

+1 because I think you are right, but while I like jQuery, I wouldn't suggest it only for an onload or especially something that can be done without an onload altogether.
@Renesis - I just want to give OP as many options as I can. I'd hate to be the guy that just recommends jQuery for everything :)
I agree with this answer. It isn't the global variable aspect, it is your timing.
@capricorn - my pleasure. jQuery is an amazing library that simplifies a lot of tedious things. But if you're just adding it to your project to fix this single issue, remember, you can also fix it by simply moving your script to the bottom of your <body>
@capricorn - no, that won't solve it. The problem is that your DOM element is not ready, so document.getElementById is returning null. To fix it you can either move the script to the bottom of the body, so it'll be run after the body is parsed, and the dom is ready, or by using the jQuery construct described above.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.