How do i write Javascript object to the document. Failed to execute 'write' on 'Document'

Question

Im doing an incredibly basic javascript exercise for school practicing for Objects. I thought the normal document.write would work but it doesn't, ive looked many places but a lot of it is just for the console. The error is

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

If anyone can help that would be great, sorry if its really easy

Here is my code

var oPerson = {
  firstName: 'John',
  lastName: 'Travis',
  gender: 'Male',
  age: 22,
  district: 'Northshore',
  hairColor: 'Brown',
  hairLength: 'Short',
  height: '6\'11"',
  weight: '74kg',
  martialStatus: 'Engaged'
}

document.write(oPerson);
document.write(oPerson.district);

oPerson.resident = "yes";

document.write(oPerson);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Exercise - Personal Info</title>
  <script src="practice9JS.js" type="text/javascript"></script>
</head>

<body>
</body>

</html>

So what was all the talk about `Failed to execute 'write' on 'Document'`? Is the issue an error, or incorrect output? And by incorrect, I mean "not what you expected" because what is printed is correct for the code you wrote. — takendarkk, Oct 16 '17 at 21:31
Using the dev tools and putting breakpoints on the statements it shows with that error. The code i wrote should display the object as a whole — Dale, Oct 16 '17 at 21:32
Your code doesn't present the object because you need to use JSON.stringify to convert to object into a string - document.write(JSON.stringify(oPerson)) — Tomer Sela, Oct 16 '17 at 21:34
Thank you for that it is working, but it is converting the whole thing to a string, including the curly braces, any way to avoid that? — Dale, Oct 16 '17 at 21:38
Possible duplicate of https://stackoverflow.com/questions/4750225/what-does-object-object-mean — CBroe, Oct 16 '17 at 21:38

Nathan · Answer 1 · 2017-10-16T21:36:48.923

1

Your document.write() calls are exectuting as the HTML is being read. By the time the DOM loads, your messages are no longer visible. Try this:

setTimeout(() => document.write(oPerson.lastName), 1000);

edited Oct 16 '17 at 21:36

answered Oct 16 '17 at 21:30

Nathan

36
4

It works displaying it to the console but im trying to display it on the site – Dale Oct 16 '17 at 21:31
@Dale well if you can't adjust that, what are you doing programming? – The Onin Oct 16 '17 at 21:38
Its just a class exercise, when displaying an object, for these purposes it needs to be on the screen. Otherwise i would – Dale Oct 16 '17 at 21:39
Printing a specific part of the object works usually without the timer, the timer doesn't make a difference when wanting to display the object as a whole – Dale Oct 16 '17 at 21:45
Then I would try appending the object to the HTML as text. {document.getElementsByTagName('body').innerHTML(oPerson.lastName);} – Nathan Oct 16 '17 at 21:50

Mateusz · Answer 2 · 2017-10-16T21:42:56.837

It's not advised to use document.write, becasue it have to be executed before loading the page. Also it's executed in HTML place exactly where was added. So in case of your code it will be added to head of the page, not the body. If you wish to just add something to HTML, you can do it withdocument.appendChild`. Where you create new element, provide some necessary info and append it to the body.

e.g. https://codepen.io/msamsel/pen/zEMZXX?editors=1010

function printToBody( str ) {
  var par = document.createElement( 'p' );
  par.innerText = str;
  document.getElementsByTagName( 'body' )[0].appendChild( par );
}

var oPerson = {
  firstName: 'John',
  lastName: 'Travis',
  age: 22
}

printToBody( oPerson.firstName )
printToBody( oPerson.lastName )
printToBody( oPerson.age )

If you really want to use document write, then move script from head to body. Then document.write should execute there.

score 0 · Answer 3 · answered Oct 16 '17 at 21:47

I'm not sure what you try to do, but if simply post content of object without any formatting, this could work for you.

var oPerson = {
  firstName: 'John',
  lastName: 'Travis',
  gender: 'Male',
  age: 22,
  district: 'Northshore',
  hairColor: 'Brown',
  hairLength: 'Short',
  height: '6\'11"',
  weight: '74kg',
  martialStatus: 'Engaged'
}
var app = document.getElementById('app');
app.innerHTML = JSON.stringify(oPerson);

<div id="app">
</div>

Good enough haha. Don't want the speech marks and curly braces but its ok — Dale, Oct 16 '17 at 21:48

How do i write Javascript object to the document. Failed to execute 'write' on 'Document'

3 Answers3