Why two "document.write(document.links[i].href)" is error?

Question

I'm beginner in Javascript.

I'm learning Browser Object Model.

Then, I had a error message from Chrome console.

My codes are below.

<html>
<head>
    <title>
    </title>
    <meta charset="UTF-8" />
    <script type="text/javascript">
    function showLinks() {
        showLinks_NOT_ERROR1();
        showLinks_NOT_ERROR1();
        showLinks_WANTED_BUT_ERROR();
    }

    function showLinks_NOT_ERROR1() {
        console.log(document.links[0].href);
        console.log(document.links[1].href);
    }
    function showLinks_NOT_ERROR2() {
        alert(document.links[0].href);
        alert(document.links[1].href);
    }
    function showLinks_NOT_ERROR3() {
        document.write(document.links[0].href);
    }
    function showLinks_WANTED_BUT_ERROR() {
        document.write(document.links[0].href);
        document.write(document.links[1].href);
    }

    </script>
</head>
<body onload="showLinks();">
    <a href="http://www.google.com">google</a>
    <a href="http://www.yahoo.com">yahoo</a>
</body>
</html>

As you could see in showLinks_NOT_ERROR3, just one document.write(document.links[0].href); has no error but two document.write(document.links[0].href); document.write(document.links[1].href); has error.

Why does this error happen?

This happens because when you call document.write for the first time function, it basically replaced your document body with the first link location. during the second call it does not have reference to any link (anchor tag href). — Dev Shangari, Sep 23 '15 at 10:54
[This](https://stackoverflow.com/a/2360112/604687) answer may help you. — Ninjakannon, Sep 23 '15 at 11:52
@gefei It's Uncaught TypeError: Cannot read property 'href' of undefined. — ChoYongha, Sep 24 '15 at 00:07
Thank you, Dev Shangari, Ninjakannon. Your post is good for understanding. — ChoYongha, Sep 24 '15 at 00:09

score 0 · Answer 1 · edited May 23 '17 at 12:29

Further to my comment: When using document.write always note:

'document.write()' is used to write to the document stream.

Calling 'document.write()' on a closed document stream automatically calls document.open(), which will clear the document.

See the correct answer marked in this post: document.write clears page

<!DOCTYPE html>
<html>
    <head><title>Test</title></head>
    <body>

    <a href="http://www.google.com">google</a>
    <a href="http://www.yahoo.com">yahoo</a>

        <script type="text/javascript">
        function showLinks() {
            showLinks_NOT_ERROR1();
            showLinks_NOT_ERROR2();
            showLinks_WANTED_BUT_ERROR();
        }

        function showLinks_NOT_ERROR1() {
            console.log(document.links[0].href);
            console.log(document.links[1].href);
        }
        function showLinks_NOT_ERROR2() {
            alert(document.links[0].href);
            alert(document.links[1].href);
        }
        function showLinks_NOT_ERROR3() {
            document.write(document.links[0].href);
        }
        function showLinks_WANTED_BUT_ERROR() {
            document.write(document.links[0].href);
            document.write(document.links[1].href);
        }
        showLinks();
        </script>
    </body>
</html>

This code should work for you. Here the showLinks function is called before the document stream is closed.

Thank you. I read your comment and related posts. So I thought that your code works because it called document.write before my first document is closed. But I copied and pasted it, it still happened same error. — ChoYongha, Sep 24 '15 at 00:12
@ChoYongha updated my code - removed the onload function call on the body - i just copied it over from your html example above — Dev Shangari, Sep 24 '15 at 09:22

Why two "document.write(document.links[i].href)" is error?

1 Answers1