Question

我有一个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

Answer 1

问题是当您单击按钮时页面已经呈现。此时触发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);
}

Answer 2

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/

Answer 3

另外两个答案解释为什么，我建议你如何避免这种情况：

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

而不是

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

使用

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

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

Javascript函数以意想不到的方式工作

3 个答案: