2

我是 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>

出现警报窗口，但不出现最后两个警报窗口。奇怪的是，当我像这样将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");

出现这两个警报窗口。还有另一个问题。我尝试了一些变化来跟踪这个问题：

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");

test0并且test2是我的两个文本框的 ID。当 和 的值test0分别test2为 12 和 3 时，不会出现警报窗口，这就是 HTML 页面上显示的内容：

12

但是当我像这样将这两条顶线放在底部时：

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

使用上面相同的文本框值，会出现警报窗口，这就是 HTML 页面上显示的内容

test test test test

我期望的是输出应该是这样的：

test
test
test
test
12
3

现在我很好奇，为什么当我只改变线的位置时，输出却有很大的不同？我的使用有什么问题Document.Writeln()吗？

4

3 回答 3

4

只要你在你的文件中写下

document.writeline("test");

您删除所有现有的 HTML，包括框<input>。如果它们不存在，document.getelementById("test0");将返回null。

使用 Firebug 很容易找到，只需document.writeln("test")在控制台中编写，您就会看到所有元素都消失了。

于 2012-10-16T10:42:47.240 回答
0

js函数测试的第一行

document.writeln(document.getElementById('test2').value);

写入输入字段 test2 ie-12 的值并清除所有其他 html 元素，因此Uncaught TypeError: Cannot read property 'value' of null当您尝试访问 dom 中不存在的元素的属性时会引发。

于 2012-10-16T11:01:59.003 回答
0

document.writeln() 是浪费时间，因为它不会做程序员通常打算做的事情。只需使用 write() 来呈现
标签。

于 2016-01-27T17:08:17.387 回答