HTML 和 Javascript 文件之间的链接出现奇怪的行为

小能豆

HTML 和 Javascript 文件之间的链接出现奇怪的行为

javascript

HTML 文件中的元素并希望通过 Javascript 更改文本。我将函数和函数调用放在 HTML 文件中并且它可以工作。然后我将相同的脚本放入 Javascript 文件中，但它不起作用。来来回回后发现了一些奇怪的事情：我可以将所有脚本保留在JS文件中，但必须在HTML文件中调用函数。有任何想法吗？谢谢。

function changeText(){
    document.getElementById("change").innerText = "bla";
}
changeText();

阅读 189

2024-02-24

共1个答案

小能豆

这种情况可能是因为您在 JavaScript 文件中的代码尝试更改 HTML 中尚不存在的元素。确保您的 JavaScript 代码在 HTML 元素被解析之后执行。

一种解决方法是将 JavaScript 代码放置在 HTML 文档的底部，确保它们在 HTML 元素加载后执行。这样可以确保在 JavaScript 代码执行时，DOM 已经加载完毕，可以访问和修改您想要更改的元素。

例如，在您的 HTML 文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="change">Initial Text</div>
    <script src="yourScript.js"></script>
</body>
</html>

然后，在 yourScript.js 文件中放置您的 JavaScript 代码：

function changeText(){
    document.getElementById("change").innerText = "New Text";
}
changeText();

通过这种方式，您的 JavaScript 代码将在 HTML 元素加载后执行，可以正确地找到并更改相应的元素。

2024-02-24