时间戳

首页 > 解决方案 > 如何在我的 HTML 中运行 JavaScript 函数

javascript - 如何在我的 HTML 中运行 JavaScript 函数

问题描述

我用 JS 代码编写了一个函数，我想从 HTML 运行它，但是当我运行该站点时，我没有看到任何反应。

我将向您展示 html 代码和 js 代码的示例。

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="test.js">
    <script src="test.js"></script>
</head>

<body onload="add()"> 
    
    <p id="add2"></p>
</body>

</html>

这里开始JS代码

function add(a,b,c,d) {
  return a + b + c + d;
}

document.getElementById("add2").innerHTML = add(5,10,15,20);

我希望我写得很清楚，有人会告诉我，我做错了什么？

标签： javascripthtml

解决方案

当浏览器加载 HTML 页面时，它会从上到下读取您的 HTML。

所以排序很重要。

当然也有复杂性。我在这里不是在谈论延迟或异步脚本。但是从上到下的简化有助于我们了解您的问题。

你的脚本在里面test.js，所以它会在 [body] 准备好之前被加载和运行。

但是test.js有这条线：

document.getElementById("add2").innerHTML = add(5,10,15,20);

此行不在函数内部，因此浏览器将尝试立即运行它。

调用add()将起作用，因为它已在文件中声明。但document.getElementById("add2")不会，因为它是在 [body] 中访问以下 HTML 的指令：

<p id="add2"></p>

但是 [body] 还没有被“读取”，所以 JavaScript DOM API 不知道它。

但是，您已经使用onload[body] 标记的属性部分解决了问题。您刚刚使用了错误的功能。

这是在完全读取 [body]之后onload运行函数的指令。因此，如果您将行更改为函数内部：document.getElementById

function runWhenBodyHasLoaded () {
  document.getElementById("add2").innerHTML = add(5,10,15,20); 
}

并告诉 [body] 标签在所有内容加载后运行该函数：

<body onload="runWhenBodyHasLoaded()">

然后<p id="add2"></p>将准备好及时访问它document.getElementById。

推荐阅读