CODEWITHSUNDEEP
javascripthtml
user1749623
user1749623

Reputation: 63

JavaScript and Document.Writeln() method

I am a newcomer 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()?

Upvotes: 2

Views: 15125

Answers (3)

Tom
Tom

Reputation: 1

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.

Upvotes: 0

Arun Killu
Arun Killu

Reputation: 14233

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.

Upvotes: 0

Bart Friederichs
Bart Friederichs

Reputation: 33491

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

Upvotes: 4

Related Questions