CODEWITHSUNDEEP
javascript
user5864652
user5864652

Reputation:

JavaScript - document.write not working

I am trying to print an h3 that has an id of question, but it won't work.

function questions() {
  var question = document.getElementById("question");
  document.write(question);
}

questions();
body {
  font-family: Arial;
}

.header {
  padding-top: 50px;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="header">
    <h1>Edu Game 1</h1>
    <h3>What is<h3 id="question">1+1?</h3></h3>
    <input type = "text" id="ansBox" />
  </div>

  <script src="scripts.js"></script>
</body>
</html>

As you can see, the result is fine until it reaches the JavaScript. How can I fix this? I know document.write isn't the best thing to use to print stuff, but I am just testing something.

Upvotes: 1

Views: 1578

Answers (4)

Dagy Tran
Dagy Tran

Reputation: 44

You are trying to write an HTMLheading object into the page. Use the .outerHTML property for this to work.

function questions() {
  var question = document.getElementById("question").outerHTML;
  document.write(question);
}

questions();
body {
  font-family: Arial;
}

.header {
  padding-top: 50px;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="header">
    <h1>Edu Game 1</h1>
    <h3>What is<h3 id="question">1+1?</h3></h3>
    <input type = "text" id="ansBox" />
  </div>

  <script src="scripts.js"></script>
</body>
</html>

Upvotes: 0

Vinnie James
Vinnie James

Reputation: 6052

Try waiting for dom content to load by placing your script in here:

document.addEventListener("DOMContentLoaded", function() {
  // code...
});

Set question with innerHTML

var question = document.getElementById("question").innerHTML;

Also, dont nest the tags, use a span instead:

<h3>What is<span id="question">1+1?</span></h3>

Upvotes: 1

Matt Wisniewski
Matt Wisniewski

Reputation: 91

question is an object of type HTMLHeadingElement. You are writing the string representation of that object, which is [object HTMLHeadingElement].

You are either interested in the raw HTML used to generate that element (question.outerHTML) or its contents (question.innerHTML).

Upvotes: 0

j08691
j08691

Reputation: 207901

document.getElementById("question") returns a DOM object (as you saw) and you want to access the HTML within it, so use the innerHTML property to get it with document.getElementById("question").innerHTML. So technically there's nothing wrong with document.write; it's doing its job. You're just not selecting the content of the element.

function questions() {
  var question = document.getElementById("question").innerHTML;
  document.write(question);
}

questions();
body {
  font-family: Arial;
}

.header {
  padding-top: 50px;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="header">
    <h1>Edu Game 1</h1>
    <h3>What is<h3 id="question">1+1?</h3></h3>
    <input type = "text" id="ansBox" />
  </div>

  <script src="scripts.js"></script>
</body>
</html>

Upvotes: 1

Related Questions