JavaScript 和 Document.Writeln() 方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12912696/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript and Document.Writeln() method
提问by user1749623
I am a newcomer on JavaScript and now I'm doing some practices by myself. One of the practices is to get the value from a textbox and then write it down on an Alert window, or on a HTML page using Document.writeln(). But then, I notice some strange problem. When I try to run this javascript:
我是 JavaScript 新手，现在自己在做一些练习。一种做法是从文本框中获取值，然后将其写在警报窗口或使用Document.writeln(). 但是，我注意到一些奇怪的问题。当我尝试运行这个 javascript 时：
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>HTML Practice</title>
<script type="text/javascript" >
function testing(){
window.alert("testing");
document.writeln("test");
document.writeln("test");
document.writeln("test");
document.writeln("test");
window.alert(document.getElementById('test0').value);
window.alert(document.getElementById('test2').value);
}
</script>
</head>
<body>
<table>
<tr>
<td><label>TextBox</label></td>
<td><input type="text" id="test0" value="12" /></td>
</tr>
<tr>
<td><label>Another TextBox</label></td>
<td><input type="text" id="test2" value="3" /></td>
</tr>
<tr>
<td><input type="button" id="button" value="Click here!" onclick="testing()" /></td>
<td>Click this button to read the text in textbox</td>
</tr>
</table>
</body>
</html>
The alert window appear, but the last two alert window doesn't appear. Strangely, when I move two bottom line on javascript to the top like this
出现警报窗口，但不出现最后两个警报窗口。奇怪的是，当我像这样将 javascript 上的两条底线移动到顶部时
window.alert(document.getElementById('test0').value); //this code is now on top
window.alert(document.getElementById('test2').value);
window.alert("testing");
document.writeln("test");
document.writeln("test");
document.writeln("test");
document.writeln("test");
Those two alert window appear. There is also another problem. I try some variation to track this problem:
出现那两个警告窗口。还有另一个问题。我尝试了一些变化来跟踪这个问题：
document.writeln(document.getElementById('test0').value);
document.writeln(document.getElementById('test2').value);
window.alert("testing");
document.writeln("test");
document.writeln("test");
document.writeln("test");
document.writeln("test");
test0and test2are IDs of my two textbox. when the value of test0and test2are 12 and 3, respectively, no alert window appear and this is what appears on the HTML page:
test0和test2是我的两个文本框的标识。当的值test0和test212个和3个，分别，没有警报窗口出现，这是在HTML页面上显示的内容：
12
But when I put those two top line on the bottom like this:
但是当我像这样将这两条顶线放在底部时：
window.alert("testing");
document.writeln("test");
document.writeln("test");
document.writeln("test");
document.writeln("test");
document.writeln(document.getElementById('test0').value);
document.writeln(document.getElementById('test2').value); //Now on the bottom
Using same textbox value above, the alert window appears and this is what appears on the HTML page
使用上面相同的文本框值，将出现警报窗口，这就是 HTML 页面上显示的内容
test test test test
What I expected is the output should be like this:
我期望的是输出应该是这样的：
test
test
test
test
12
3
Now I'm curious, why when I only change the position of the line, the output is very different? Is there something wrong on my usage of Document.Writeln()?
现在我很好奇，为什么当我只改变线的位置时，输出却有很大的不同？我的使用有什么问题Document.Writeln()吗？
回答by Bart Friederichs
As soon as you write in your document with
只要你在你的文档中写下
document.writeline("test");
you removeall the exisiting HTML, includingthe <input>boxes. If they do not exist, document.getelementById("test0");will return null.
您删除所有等植物学HTML，包括了<input>箱子。如果它们不存在，document.getelementById("test0");将返回null。
Easy to find out by using Firebug, just write document.writeln("test")in the console, you'll see all your elements are gone.
使用 Firebug 很容易找到，只需document.writeln("test")在控制台中写入，您就会看到所有元素都消失了。
回答by Arun Killu
The very first line of js function testing
第一行js功能测试
document.writeln(document.getElementById('test2').value);
writes the value of input field test2 ie-12 and clears the all other html elements,
therefore Uncaught TypeError: Cannot read property 'value' of nullwill be raised when you try to access a property of an element that does not exist in dom.
写入输入字段 test2 ie-12 的值并清除所有其他 html 元素，因此Uncaught TypeError: Cannot read property 'value' of null当您尝试访问 dom 中不存在的元素的属性时将引发。
回答by Tom
document.writeln() is a waste of time, as it will not do what the programmer usually intends for it to do. Just use write() to render
tags.
document.writeln() 是浪费时间，因为它不会做程序员通常希望它做的事情。只需使用 write() 来呈现
标签。
