Menu
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.
908
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
