I am a newer on JavaScript and now I'm doing some practices by myself. One of the practices is to get the value from a textbox and then write it down on an Alert window, or on a HTML page using Document.writeln(). But then, I notice some strange problem. When I try to run this javascript:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>HTML Practice</title>
<script type="text/javascript" >
function testing(){
window.alert("testing");
document.writeln("test");
document.writeln("test");
document.writeln("test");
document.writeln("test");
window.alert(document.getElementById('test0').value);
window.alert(document.getElementById('test2').value);
}
</script>
</head>
<body>
<table>
<tr>
<td><label>TextBox</label></td>
<td><input type="text" id="test0" value="12" /></td>
</tr>
<tr>
<td><label>Another TextBox</label></td>
<td><input type="text" id="test2" value="3" /></td>
</tr>
<tr>
<td><input type="button" id="button" value="Click here!" onclick="testing()" /></td>
<td>Click this button to read the text in textbox</td>
</tr>
</table>
</body>
</html>
The alert window appear, but the last two alert window doesn't appear. Strangely, when I move two bottom line on javascript to the top like this
window.alert(document.getElementById('test0').value); //this code is now on top
window.alert(document.getElementById('test2').value);
window.alert("testing");
document.writeln("test");
document.writeln("test");
document.writeln("test");
document.writeln("test");
Those two alert window appear. There is also another problem. I try some variation to track this problem:
document.writeln(document.getElementById('test0').value);
document.writeln(document.getElementById('test2').value);
window.alert("testing");
document.writeln("test");
document.writeln("test");
document.writeln("test");
document.writeln("test");
test0 and test2 are IDs of my two textbox. when the value of test0 and test2 are 12 and 3, respectively, no alert window appear and this is what appears on the HTML page:
12
But when I put those two top line on the bottom like this:
window.alert("testing");
document.writeln("test");
document.writeln("test");
document.writeln("test");
document.writeln("test");
document.writeln(document.getElementById('test0').value);
document.writeln(document.getElementById('test2').value); //Now on the bottom
Using same textbox value above, the alert window appears and this is what appears on the HTML page
test test test test
What I expected is the output should be like this:
test
test
test
test
12
3
Now I'm curious, why when I only change the position of the line, the output is very different? Is there something wrong on my usage of Document.Writeln()?
I am a newer on JavaScript and now I'm doing some practices by myself. One of the practices is to get the value from a textbox and then write it down on an Alert window, or on a HTML page using Document.writeln(). But then, I notice some strange problem. When I try to run this javascript:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>HTML Practice</title>
<script type="text/javascript" >
function testing(){
window.alert("testing");
document.writeln("test");
document.writeln("test");
document.writeln("test");
document.writeln("test");
window.alert(document.getElementById('test0').value);
window.alert(document.getElementById('test2').value);
}
</script>
</head>
<body>
<table>
<tr>
<td><label>TextBox</label></td>
<td><input type="text" id="test0" value="12" /></td>
</tr>
<tr>
<td><label>Another TextBox</label></td>
<td><input type="text" id="test2" value="3" /></td>
</tr>
<tr>
<td><input type="button" id="button" value="Click here!" onclick="testing()" /></td>
<td>Click this button to read the text in textbox</td>
</tr>
</table>
</body>
</html>
The alert window appear, but the last two alert window doesn't appear. Strangely, when I move two bottom line on javascript to the top like this
window.alert(document.getElementById('test0').value); //this code is now on top
window.alert(document.getElementById('test2').value);
window.alert("testing");
document.writeln("test");
document.writeln("test");
document.writeln("test");
document.writeln("test");
Those two alert window appear. There is also another problem. I try some variation to track this problem:
document.writeln(document.getElementById('test0').value);
document.writeln(document.getElementById('test2').value);
window.alert("testing");
document.writeln("test");
document.writeln("test");
document.writeln("test");
document.writeln("test");
test0 and test2 are IDs of my two textbox. when the value of test0 and test2 are 12 and 3, respectively, no alert window appear and this is what appears on the HTML page:
12
But when I put those two top line on the bottom like this:
window.alert("testing");
document.writeln("test");
document.writeln("test");
document.writeln("test");
document.writeln("test");
document.writeln(document.getElementById('test0').value);
document.writeln(document.getElementById('test2').value); //Now on the bottom
Using same textbox value above, the alert window appears and this is what appears on the HTML page
test test test test
What I expected is the output should be like this:
test
test
test
test
12
3
Now I'm curious, why when I only change the position of the line, the output is very different? Is there something wrong on my usage of Document.Writeln()?
-
Have tried running it in a JavaScript debugger/console? Chrome has one built-in, Firefox has to exquisite
Firebugplugin. – Bart Friederichs Commented Oct 16, 2012 at 10:36 - TypeError: Cannot read property 'value' of null – Arun Killu Commented Oct 16, 2012 at 10:38
- I already using Firebug to trackdown the problem. One thing that I notice when tracking the code is after document.writeln() line, the code breaks. That's why I think the problem lies on that method @ArunKillu The last example is still using 12 and 3 as the value of 'test0' and 'test2' textboxes respectively. – user1749623 Commented Oct 16, 2012 at 10:40
- 1 As you are a beginner in javascript I can strongly remend this w3schools./js/default.asp – JohannesAndersson Commented Oct 16, 2012 at 10:50
3 Answers
Reset to default 4As soon as you write in your document with
document.writeline("test");
you remove all the exisiting HTML, including the <input> boxes. If they do not exist, document.getelementById("test0"); will return null.
Easy to find out by using Firebug, just write document.writeln("test") in the console, you'll see all your elements are gone.
The very first line of js function testing
document.writeln(document.getElementById('test2').value);
writes the value of input field test2 ie-12 and clears the all other html elements,
therefore Uncaught TypeError: Cannot read property 'value' of null will be raised when you try to access a property of an element that does not exist in dom.
document.writeln() is a waste of time, as it will not do what the programmer usually intends for it to do. Just use write() to render
tags.