document.write doesnt work, but console.log does

Question

So I am creating an array out of the events created by a certain user on facebook, I have all the API stuff working and everything but I cant document.write it for some reason.

Here is my code:

for( var i = 0 ; i < response.length ; i++ ) 
{
    if (response[i]['eid'] > 0)
    {
        document.write([response[i]['name']] + '</br>' + response[i]['description']),
        console.log([response[i]['name']] + '</br>' + response[i]['description']);
    }
}

When I log it, its fine, but I cant actually display it on the page. alert()'ing it also works.

Any ideas how I can spit these variables out?

Answer 1

When you call document.write after page load, it rewrites the current page which doesn't contain the returned data or loop iterating over that data. Since you are using the FB API, Im guessing this is being run after page load. Try using a client-side templating solution to render all of that data. That way you won't have to do a bunch of string concatenation to create the HTML for your data.

Answer 2

If the sole purpose of the page is to display the results of the FB api call, then as long as your page is setup as valid HTML and all of your javascript is contained in the head part of the document, document.write should work. document.write is generally only ever used before the page loads, and within the body. Once the page loads, the entire body section of the document is written over and replaced. So if any of your scripts are within the body, it will be replaced also.

A much better alternative in my opinion is to have a div and populate the div with the results.

HTML:

<div id="results">
</div>

Javascript:

var results = "";

for( var i = 0 ; i < response.length ; i++ ) 
{
    if (response[i]['eid'] > 0)
    {
        results += response[i]['name'] + '</br>' + response[i]['description'];
        console.log(response[i]['name'] + '</br>' + response[i]['description']);
    }
}

document.getElementById("results").innerHTML = results;

Edit: My explanation above is wrong, document.write does rewrite the entire document if used after the page loads. My solution above is still 100% valid.

The accepted answer above isn't 100% correct... the code below clearly demonstrates that even when the document is overwritten, at the very least, functions and variables already set in the global object (window) are not lost, and they still run. So if you loop through data that is already set, it will still run and display the results, so there is more to the issue than just the javascript being overwritten.

Try this out:

<!DOCTYPE html>
<html>
<head>
<title>hi</title>
<script type="text/javascript">
    window.onload = function () {
        setTimeout(function () {
            for (i = 0; i < 10; i++)
                // this runs 3 seconds after the page loads, so after the first iteration
                // the entire document is erased and overwritten with 'hi',
                // however this loop continues to run, and write() continues to execute,
                // showing that the javascript still exists and operates normally.
                write();
        }, 3000);
    };

    // this variable will still exist after the page is overwritten
    window.someVar = "foo";

    // this function still exists and executes after the page is overwritten
    function write() {
        document.write("hi");
    }
</script>
</head>
<body>
<div>
    <b>hello</b>
</div>
</body>
</html>

document.write doesnt work, but console.log does

Question

2 answers

solution1
5 ACCPTED 2013-01-04 02:16:01

solution2
0 2013-01-04 02:34:56

document.write doesnt work, but console.log does

Question

2 answers

solution1 5 ACCPTED 2013-01-04 02:16:01

solution2 0 2013-01-04 02:34:56

solution1
5 ACCPTED 2013-01-04 02:16:01

solution2
0 2013-01-04 02:34:56