By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,500 Members | 1,250 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,500 IT Pros & Developers. It's quick & easy.

Javascript Global Variables Not Working as expected

P: 1
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:
Expand|Select|Wrap|Line Numbers
  1.  <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Span to Text Box - Demo - DOM</title>
  5. <script type="text/javascript" language="javascript">
  6. var textNode = document.getElementById('text');
  7. var textValue = textNode.firstChild.nodeValue;
  8. var textboxNode = document.getElementById('textbox');
  9. var doneButton = document.getElementById('done');
  10.  
  11. function change()
  12. {
  13. textboxNode.setAttribute('value', textValue);
  14. textNode.style.display = 'none';
  15. textboxNode.setAttribute('type','text');
  16. doneButton.setAttribute('type','button');
  17. }
  18. function changeBack()
  19. {
  20. textNode.firstChild.nodeValue = textboxNode.value;
  21. textNode.style.display = 'block';
  22. textboxNode.setAttribute('type', 'hidden');
  23. doneButton.setAttribute('type','hidden');
  24. }
  25. </script>
  26. </head>
  27.  
  28. <body>
  29. <p id="text" onClick="change()">Click me!</p>
  30. <form onSubmit="return false;">
  31.   <input type="hidden" id="textbox" />
  32.   <input type="hidden" id="done" onClick="changeBack()" value="Done" />
  33. </form>
  34. </body>
  35. </html>
  36.  
Please Help!
Thanks in Advance.
Nov 26 '11 #1
Share this Question
Share on Google+
1 Reply


omerbutt
100+
P: 638
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
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Span to Text Box - Demo - DOM</title>
  6. <script type="text/javascript">
  7.  
  8.     var textNode =null;
  9.     var textValue =null;
  10.     var textboxNode =null;
  11.     var doneButton =null;
  12.  
  13.     window.onload=function (){
  14.         textNode = document.getElementById('text');
  15.         textValue = textNode.firstChild.nodeValue;
  16.         textboxNode = document.getElementById('textbox');
  17.         doneButton = document.getElementById('done');
  18.     }
  19.  
  20.  
  21.     function change(){
  22.     textboxNode.setAttribute('value', textValue);
  23.     textNode.style.display = 'none';
  24.     textboxNode.setAttribute('type','text');
  25.     doneButton.setAttribute('type','button');
  26.     }
  27.  
  28.  
  29.     function changeBack()
  30.     {
  31.     textNode.firstChild.nodeValue = textboxNode.value;
  32.     textNode.style.display = 'block';
  33.     textboxNode.setAttribute('type', 'hidden');
  34.     doneButton.setAttribute('type','hidden');
  35.     }
  36. </script>
  37.  
  38. </head>
  39.  
  40. <body>
  41. <div>
  42. <p id="text" onClick="change()">Click me!</p>
  43. <form onSubmit="return false;">
  44. <input type="hidden" id="textbox" />
  45. <input type="hidden" id="done" onClick="changeBack()" value="Done" />
  46. </form>
  47. </div>
  48. </body>
  49. </html>
  50.  
  51.  
Nov 27 '11 #2

Post your reply

Sign in to post your reply or Sign up for a free account.