JavaScript-document.write无法正常工作
[英]JavaScript - document.write not working
问题描述
I am trying to print an h3 that has an id of question, but it won't work. 
我正在尝试打印一个具有问题ID的H3，但无法正常工作。
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. 如您所见，在到达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. 我知道document.write并不是用来打印东西的最好方法，但是我只是在测试一些东西。
4 个解决方案
解决方案1
1 2016-08-25 20:50:26
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 . document.getElementById("question")返回一个DOM对象（如您所见），并且您想访问其中的HTML，因此请使用innerHTML属性通过document.getElementById("question").innerHTML来获取它。 So technically there's nothing wrong with document.write ; 因此从技术上讲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>
解决方案2
0 2016-08-25 20:52:22
question is an object of type HTMLHeadingElement. 问题是HTMLHeadingElement类型的对象。 You are writing the string representation of that object, which is [object HTMLHeadingElement]. 您正在编写该对象的字符串表示形式，即[object HTMLHeadingElement]。
You are either interested in the raw HTML used to generate that element (question.outerHTML) or its contents (question.innerHTML). 您可能对用于生成该元素的原始HTML（question.outerHTML）或其内容（question.innerHTML）感兴趣。
解决方案3
0 2016-08-25 20:55:04
Try waiting for dom content to load by placing your script in here: 通过将脚本放在此处，尝试等待dom内容加载：
document.addEventListener("DOMContentLoaded", function() {
// code...
});
Set question with innerHTML 使用innerHTML设置question
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>
解决方案4
0 2016-08-25 20:56:49
You are trying to write an HTMLheading object into the page. 您正在尝试将HTMLheading对象写入页面。 Use the .outerHTML property for this to work. 使用.outerHTML属性可以正常工作。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.