Javascript Global Variables Not Working as expected

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Zulqarnain Ali
    New Member
    • Nov 2011
    • 1
    #1

    Javascript Global Variables Not Working as expected

    Hi all,
    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:
    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.
    Last edited by acoder; Nov 27 '11, 05:39 PM. Reason: Added [code] tags
    Tags: None
    • omerbutt
      Contributor
      • Nov 2006
      • 638
      #2
      Hi Zulqarnain
      this is because the variables are initializing before the html document is rendered and thats why it does not find the elements and produce error , where as when you initialize them inside the change()
      function the document is already loaded and works , try this code it works as you like it to work
      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Span to Text Box - Demo - DOM</title>
<script type="text/javascript">
	
	var textNode =null;
	var textValue =null;
	var textboxNode =null;
	var doneButton =null;
	
	window.onload=function (){
		textNode = document.getElementById('text');
		textValue = textNode.firstChild.nodeValue;
		textboxNode = document.getElementById('textbox');
		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>
<div>
<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>
</div>
</body>
</html>

        Comment

        Previous template Next
        Working...