13

我有一个javascript函数'doAll'，它应该写出所有放在<p>, </p>标签之间的文本。在我的代码中，它以两种方式使用。

当我在页面末尾调用它时它可以正常工作。然而，当点击按钮事件发生时它也应该被触发。由于某种原因，它这次没有做它应该做的事情。当单击按钮时，它只会打印第一个<p>...</p>html 元素的内部 html。

我的问题是为什么它在这两种情况下的工作方式不同，我应该怎么做才能解决这个问题。

<!DOCTYPE html>
<html>
    <head>
        <script>
            function returnList(x)
            {
                return document.getElementsByTagName(x);
            }

            function writeList(x)
            {
                var i = 0;

                while (x[i])
                {
                    document.write(x[i++].innerHTML + '<br/>');
                }
            }

            function doAll(x) 
            {
                writeList(returnList(x));
            }
        </script>
    </head>

    <body>
        <p>XXX</p>
        <p>YYY</p>
        <div style = 'background-color: gray;'>
            <p>YYY</p>
            <p>XXX</p>
        </div>

        <button type = 'button' onclick = "doAll('p')">
            Click me!
        </button>

        <script>
            document.write('<br/>');
            doAll('p');
        </script>
    </body>
</html>

这是“输出”：
XXX
YYY
YYY
XXX

XXX
YYY
YYY
XXX

点击按钮后可以看到如下内容：
XXX

4

3 回答 3

14

问题是当您单击按钮时页面已经呈现。此时触发document.write()将覆盖整个文档。它写入第一个元素，因为当您触发函数时，这是唯一仍然存在的元素。document.write()任何其他元素在第一次执行后将根本不存在。

甚至您的函数本身也不再是文档的一部分。如果您MUST使用document.write()它或者您只是想出于测试原因使用它，您必须以某种方式“缓存”您的数据并立即输出：

function writeList(x) {
    var i = 0, data = "";

    while (x[i]) {
        data += x[i++].innerHTML + '<br/>';
    }

    document.write(data);
}
于 2013-07-15T13:26:00.507 回答
3

document.write只能将内容写入当前正在加载的文档。加载后，它的行为会有所不同 - 请参阅https://developer.mozilla.org/en-US/docs/Web/API/document.write。使用特殊的容器元素并innerHTML编写您想要的输出。

function writeList(list) {
    var i, result = "";
    for (i = 0; i < list.length; i++) {
        result += list[i].innerHTML + "<br />";
    }
    document.getElementById("myContainer").innerHTML = result;
}

http://jsfiddle.net/3yPAW/1/

于 2013-07-15T13:23:24.643 回答
2

其他两个答案解释了原因，我会建议您如何避免这种情况：

将您的 HTML 附加到innerHTML正文（或其他元素）；

代替

document.write(x[i++].innerHTML + '<br/>');

采用

document.getElementsByTagName("body")[0].innerHTML += x[i++].innerHTML + '<br/>';

演示：http: //jsfiddle.net/MNCbx/

于 2013-07-15T13:30:48.910 回答