html 元素在 Javascript 文件之后加载，即使<script> tag is at the bottom of the <body> tag
[英]html elements load after Javascript file even though the <script> tag is at the bottom of the <body> tag
问题描述
I got a Javascript problem.
我遇到了 Javascript 问题。 The HTML elements keep waiting for the javascript file, even though the script tag is at the bottom of the page. HTML 元素一直在等待 javascript 文件，即使脚本标记位于页面底部。 Elements do not update if changed and disappear after 5 seconds This is the code:元素不会更新，如果更改并在 5 秒后消失这是代码：
code:代码：
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<h1>javascript in HTML</h1>
<p>HElllllooooo</p>
<script type="text/javascript">
var age = prompt("What is your age?");
if (Number(age) < 18) {
alert("Sorry, you are too young to drive this car. Powering off ");
} else if (Number(age) > 18) {
alert("Powering on. Enjoy the ride!");
} else if (Number(age) === 18 ) {
alert("Congratulations on your first year of driving. Enjoy the
ride!");
}
</script>
</body>
</html>
4 个解决方案
解决方案1
1 2018-06-15 02:45:50
prompt is synchronous, and hence blocks execution until it returns. prompt是同步的，因此阻止执行直到返回。 That's why the second line (and the rest of the lines) don't execute until your prompt returns. 这就是为什么第二行（以及其余各行）在prompt返回之前不执行的原因。
As for the script tag being at the bottom, enforce it like this: 至于位于底部的script标签，请按以下方式实施：
window.onload = myFunction
解决方案2
0 2018-06-13 18:07:45
You may need to add it inside of its own anonymous function which can be set to run onload ; 您可能需要将其添加到其自己的匿名函数中，该函数可以设置为在onload上运行；
That in theory should work fine: 理论上应该可以正常工作：
(function () {
var age = prompt("What is your age?");
if (Number(age) < 18) {
alert("...");
} else if (Number(age) > 18) {
alert("...");
} else if (Number(age) === 18) {
alert("...");
} else {
// ... fallback logic?
}
})();
Or as it has been answered, you may want to wrap the code inside of a window.load var. 或者，正如已经回答的那样，您可能需要将代码包装在window.load var中。 Also an anonymous function. 也是一个匿名函数。
解决方案3
0 2021-11-25 15:22:20
Just simply add an onload attribute on the <body> like so, whatever:只需像这样在<body>上添加一个onload属性，无论如何：
<body onload="carsGoBrr()">
And then DEFINE the function:然后定义函数：
function carsGoBrr() {
var age = prompt("What is your age?");
if (Number(age) < 18) {
alert("Sorry, you are too young to drive this car. Powering off ");
} else if (Number(age) > 18) {
alert("Powering on. Enjoy the ride!");
} else if (Number(age) === 18 ) {
alert("Congratulations on your first year of driving. Enjoy the ride!");
}
}
FULL CODE ( By my style of coding ;) ):完整代码（按照我的编码风格；））：
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>javascript in HTML</h1>
<p>HElllllooooo</p>
<script type="text/javascript">
function carsGoBrr() {
var age = prompt("What is your age?");
if (Number(age) < 18) {
alert("Sorry, you are too young to drive this car. Powering off ");
} else if (Number(age) > 18) {
alert("Powering on. Enjoy the ride!");
} else if (Number(age) === 18 ) {
alert("Congratulations on your first year of driving. Enjoy the ride!");
}
}
</script>
</body>
</html>
解决方案4
-1 2018-06-13 17:58:57
Have you tried placing your conditional into a window.onload function? 您是否尝试过将条件放入window.onload函数中？
window.onload = function(){
// code goes here
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.