Question

我有一个HTML页面，以及一个单独的.js文件，该文件包含在带有<script src="...">标记的页面中。

这是我的.js文件：

element = document.getElementById("test");
function sayTest() {
    alert(element.innerHTML);
}

当我将此代码放在html页面的<script>标记中时，它可以正常工作。当我将此代码放在外部.js文件中，并将其包含在<script src="...">标记中时，它不起作用。

为什么第二种方式不起作用，我该如何解决？

Answer 1

~~Javascript可能在DOM加载了所有内容之前运行。~~

你应该能够包装它，以便它在DOM加载后运行。

document.addEventListener("DOMContentLoaded", function(event) { element = document.getElementById("test"); function sayTest() { alert(element.innerHTML); } });

~~你在哪里实际调用sayTest函数？如果我执行以下操作，则可以使用~~

~~element = document.getElementById("test"); function sayTest() { alert(element.innerHTML); } sayTest();~~

根据您提供的信息。以下应该有效。

index.html文件

<!DOCTYPE html>
<html>
    <body>
        <button onclick="sayTest()">Click Me!</button>
        <p id="test">Hello World!</p>

        <script src="script.js" ></script>
    </body>
</html>

script.js文件

element = document.getElementById("test");
function sayTest() {
    alert(element.innerHTML);
}

Answer 2

尝试使用这样的方法：可能你在exeterna.js中有元素在某处使用。检查要添加的文件路径，看看文件是否正确添加。

function sayTest() {
var element = document.getElementById("test");
    alert(element.innerHTML);
}

call sayTest() onclick.

外部.js文件无法获取页面元素？

2 个答案: