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
– takendarkk, Commented Oct 16, 2017 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
– Dale, Commented Oct 16, 2017 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
– Tomer Sela, Commented Oct 16, 2017 at 21:34

Nathan · Accepted Answer · 2017-10-16 21:36:48Z

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, 2017 at 21:36

answered Oct 16, 2017 at 21:30

Nathan

364 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dale Over a year ago

It works displaying it to the console but im trying to display it on the site

onin Over a year ago

@Dale well if you can't adjust that, what are you doing programming?

Dale Over a year ago

Its just a class exercise, when displaying an object, for these purposes it needs to be on the screen. Otherwise i would

Dale Over a year ago

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

Nathan Over a year ago

Then I would try appending the object to the HTML as text. {document.getElementsByTagName('body').innerHTML(oPerson.lastName);}

Mateusz · Accepted Answer · 2017-10-16 21:42:56Z

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.

user8672473 · Accepted Answer · 2017-10-16 21:47:26Z

0

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>

answered Oct 16, 2017 at 21:47

user8672473

2362 silver badges8 bronze badges

1 Comment

Dale Over a year ago

Good enough haha. Don't want the speech marks and curly braces but its ok

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related