如何在我的 HTML 中运行 JavaScript function

Question

我在 JS 代码中写了一个 function，我想从 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);

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

Answer 1

您的 JavaScript 代码位于head中，位于body和其他所有内容之前，因此 JavaScript 在创建p元素之前运行（html 逐行运行）。 要解决此问题，您可以尝试将 JavaScript 放在文档末尾，例如在body之后。

Answer 2

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

所以排序很重要。

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

您的脚本位于test.js中，因此它将在 [body] 准备好之前加载并运行。

但是test.js有这一行：

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

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

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

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

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

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

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

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

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

<body onload="runWhenBodyHasLoaded()">

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

Answer 3

或使用 jQuery： https://jsfiddle.net/bdgu8s4h/1/

还可以考虑在最后（正文）加载您的 JS

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

<head>
    <link rel="stylesheet" href="test.css">
</head>

<body> 
    <p id="add2"></p>
    <script type="text/javascript" src="test.js"></script>
</body>

</html>

JS（jQuery）：

$(document).ready(function() {
function add(a,b,c,d) {
    return a + b + c + d;
}
    $('#add2').html(add(5,10,15,20));
});

希望这也有帮助，干杯

如何在我的 HTML 中运行 JavaScript function

问题描述

3 个解决方案

解决方案1
0 2021-01-18 18:52:54

解决方案2
0 2021-01-18 18:53:19

解决方案3
0 2021-01-18 18:54:33

如何在我的 HTML 中运行 JavaScript function

问题描述

3 个解决方案

解决方案1 0 2021-01-18 18:52:54

解决方案2 0 2021-01-18 18:53:19

解决方案3 0 2021-01-18 18:54:33

解决方案1
0 2021-01-18 18:52:54

解决方案2
0 2021-01-18 18:53:19

解决方案3
0 2021-01-18 18:54:33