如何在我的 HTML 中运行 JavaScript function

Question

I wrote a function in JS code, and I want to run it from HTML, but I don't see any reaction, when I run the site.我在 JS 代码中写了一个 function，我想从 HTML 运行它，但是当我运行该站点时，我没有看到任何反应。

I will show you example of html code and js code.我将向您展示 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>

Here starts JS code这里开始JS代码

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

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

I hope I wrote it clearly and someone will tell me, what did I do wrong?我希望我写得很清楚，有人会告诉我，我做错了什么？

Answer 1

Your JavaScript code is in the head , which is before the body and everything else, so the JavaScript runs before the p element has been created (html is run line by line).您的 JavaScript 代码位于head中，位于body和其他所有内容之前，因此 JavaScript 在创建p元素之前运行（html 逐行运行）。 To fix this issue, you can try putting the JavaScript at the end of the document, for example after body .要解决此问题，您可以尝试将 JavaScript 放在文档末尾，例如在body之后。

Answer 2

When a browser loads an HTML page, it reads your HTML from top-to-bottom.当浏览器加载 HTML 页面时，它会从上到下读取您的 HTML。

So ordering is important.所以排序很重要。

There are complexities of course.当然也有复杂性。 I'm not talking about deferred or asynchronous scripts here.我在这里不是在谈论延迟或异步脚本。 But the top-to-bottom simplification helps us understand your problem.但是从上到下的简化有助于我们了解您的问题。

Your script is inside test.js , so it will be loaded and run before [body] is ready.您的脚本位于test.js中，因此它将在 [body] 准备好之前加载并运行。

But test.js has this line:但是test.js有这一行：

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

This line is not inside a function, so the browser will try to run it immediately.此行不在 function 内，因此浏览器将尝试立即运行它。

The call to add() will work because it has been declared in the file.对add()的调用将起作用，因为它已在文件中声明。 But document.getElementById("add2") will not, because it is an instruction to access the following HTML in the [body]:但是document.getElementById("add2")不会，因为它是访问[body]中以下HTML的指令：

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

But the [body] has not been "read" yet, so the JavaScript DOM API does not know about it.但是 [body] 还没有被“读取”，所以 JavaScript DOM API 不知道它。

However, you have partially solved the problem already using the onload attribute of the [body] tag.但是，您已经使用 [body] 标记的onload属性部分解决了问题。 You've just used the wrong function with it.您刚刚使用了错误的 function 。

That onload is an instruction to run a function after [body] has been completely read.该onload是在 [body] 被完全读取后运行 function 的指令。 So if you changed your document.getElementById line to be inside a function:因此，如果您将document.getElementById行更改为 function 内：

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

And told the [body] tag to run the function after everything has loaded:并告诉 [body] 标签在所有内容加载后运行 function：

<body onload="runWhenBodyHasLoaded()">

Then <p id="add2"></p> will be ready in time to access it with document.getElementById .然后<p id="add2"></p>将及时准备好使用document.getElementById访问它。

Answer 3

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

Also consider loading your JS at the end (of body)还可以考虑在最后（正文）加载您的 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): JS（jQuery）：

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

Hope this also helped, cheers希望这也有帮助，干杯

如何在我的 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