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

Javascript function works in unexpected way

本文关键字：意想不到 一种 方式 工作 函数 Javascript      更新时间：2023-09-26

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

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

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

function writeList(x) {
    var i = 0, data = "";
    while (x[i]) {
        data += x[i++].innerHTML + '<br/>';
    }
    document.write(data);
}

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/

其他两个答案解释了为什么，我建议您如何避免这种情况：

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

而不是

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

使用

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

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

相关文章：