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:

Expand|Select|Wrap|Line Numbers

  <!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.

Nov 26 '11 #1

Subscribe Post Reply

3062

omerbutt

638

512MB

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

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

Nov 27 '11 #2

by: Richard A. DeVenezia | last post by:

Dear Experts: Suppose I have global variables: x1, x2, x3 and I have a function that needs to assign a value to a new global variable x4 something like function foo () { count = 0;

Javascript

Where can I declare Global Variables

by: rick | last post by:

Noob problem. I prefer to keep all my scripts in an external '.js' file. I am currently loading the external '.js' file from the header. Problem is I would like to declare a global variable in the...

Javascript

does scope allow the transfer of non-global variables between functions?

by: lawrence | last post by:

I'm learning Javascript. I downloaded a script for study. Please tell me how the variable "loop" can have scope in the first function when it is altered in the second function? It is not defined...

Javascript

Can I prevent the loss of the values assigned to global variables after an untrapped run-time error?

by: MLH | last post by:

A97 Topic: If there is a way to preserve the values assigned to global variables when an untrapped runtime error occurs? I don't think there is, but I thought I'd ask. During development, I'm...

Microsoft Access / VBA

Global Variables

by: whisper | last post by:

My question is whether it is better to use a global variable to hold a dynamically malloced multidim array or pass around pointers to it. The details are below (forgive the long winded explanation)...

C / C++

JavaScript global object

by: Roman Ziak | last post by:

Hello, there were times when I used to be looking for a way to access JavaScript Global object similar to those found in VBScript or PHP ($GLOBALS). At present this has only academic value for...

Javascript

global variables

by: Sandman | last post by:

I dont think I understand them. I've read the section on scope in the manual inside out. I'm running PHP 5.2.0 Here is the code I'm working on: //include_me.php <?php $MYVAR = array(); global...

PHP

Working with global variables

by: phoenix917 | last post by:

I have been working on this code for 5 days... I have read multiple tutorials and looked at various code. This is my third forum try... :) My instructor refuses to help me. I think it's because...

Javascript

The Case Against Global Variables

by: weaknessforcats | last post by:

C++: The Case Against Global Variables Summary This article explores the negative ramifications of using global variables. The use of global variables is such a problem that C++ architects have...

C / C++

javascript global variables

by: localp | last post by:

i created a javascript function that would calculate the total values of an array . (just addition) - and it did work and display correctly in that function. i initialized the variable where i...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

Javascript Global Variables Not Working as expected

Similar topics