[英]How to make a javascript load after other page elements are loaded?
所以我用 HTML 制作了这个石头剪刀布游戏。 当页面加载时，它会通过弹出窗口询问用户的输入。 问题是在我的任何 div 之前加载弹出窗口，我希望我的所有 html 元素在弹出脚本启动之前都可见。
这是我的代码：
<body>
<div class="user">
<div class="container">You choose:</div>
<div id="userInput"></div>
</div>
<div class="computer">
<div class="container">Computer chooses:</div>
<div id="computerInput"></div>
</div>
<div class="results">
<div class="container">Results:</div>
<div id="resultsOutput"></div>
</div>
<script type="text/javascript">
var userInput = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (userInput === "rock" || userInput === "paper" || userInput === "scissors") {
var userChoice = userInput
} else {
userChoice = "Invalid entry, sorry. "
}
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log("Computer: " + computerChoice);
function compare(choice1, choice2) {
if (userInput === "rock" || userInput === "paper" || userInput === "scissors") {
if (choice1 === choice2) {
return "The result is a tie!";
} else if (choice1 === "rock") {
if (choice2 === "scissors") {
return "rock wins";
} else {
return "paper wins"
}
} else if (choice1 === "paper") {
if (choice2 === "rock") {
return "paper wins";
} else {
return "scissors wins";
}
} else if (choice1 === "scissors") {
if (choice2 === "rock") {
return "rock wins";
} else {
return "scissors wins"
}
}
} else {
return "Results not calculated."
}
}
document.getElementById("userInput").innerHTML = userChoice;
document.getElementById("computerInput").innerHTML = computerChoice
compare(userChoice, computerChoice);
document.getElementById("resultsOutput").innerHTML = compare(userChoice, computerChoice)
</script>
</body>
您的 javascript 在页面的其余部分加载之前执行
您正在尝试使用window.onload ，但您做错了。 window.onload应该是一个函数，像这样：
window.onload = function(){
//your code here
}
但这仅适用于您只想在页面加载时启动一个功能的情况。 一般来说，最好使用 window.addEventListener 方法，因为您可以使用其中的多个方法，并且所有方法都将被执行。
如果您使用另一个window.onload = function(){} ，它将覆盖第一个。
这就是为什么我建议使用：
window.addEventListener('load',function(){
//your code here
})
解决方案1：
您可以将脚本放在 HTML 文档的底部。 这将在<div>元素加载后运行您的代码：
<html>
<head></head>
<body>
<div></div>
<div></div>
<div></div>
...
<script>
// Put your JS code here
</script>
</body>
</html>
</html>
解决方案 2：此外，您可以将所有 JS 放在window.onload事件侦听器中：
window.onload = function() {
// Put your JS code here
};
你可以做三件事。
调用您的逻辑作为您的身体 onload 事件的一部分
document.body.onload = function() { console.log('I loaded!'); };
如果您使用的是 jquery，您可以通过执行以下操作获得与上述相同的结果：
$(function() { console.log('I loaded!'); })(jQuery);
如果您使用 jQuery，Hero1134 是完全正确的。 如果你使用 jQuery，虽然你应该使用
$(document).ready(function(){ })
.ready 函数将在 DOM 准备好（加载 html 元素并准备好对其进行处理）后立即执行。 如果您使用 .load ，您将等待页面上的每个元素完整加载，因此您必须等待大图像等待加载。 在某些页面上，这两种方法之间的差异可能是几秒钟！
您也可以在文件末尾运行脚本
<body>
<divs />
<script>var userInput = prompt("Do you choose rock, paper or scissors?"); ...</script>
</body>
因此这些元素将可用于脚本。
如果您只想使用没有依赖项的普通旧 javascript 并且您想在文件顶部包含 js，则可以修复此行
window.onload = var userInput = prompt("Do you choose rock, paper or scissors?"); ...
成为这个
window.onload = function(){ var userInput = prompt("Do you choose rock, paper or scissors?"); ... }
你有两个选择 1.在 JavaScript 中，你可以像下面的语法那样做
document.addEventListener('DOMContentLoaded', function() {
// your code here
}, false);
2.在Jquery中这样做
$(document).ready(function(){
// your code here
});
也许你可以试试这个...
<div id="quiz">
<div class="user ">
<div class="container">You choose:</div>
<div id="userInput"></div>
</div>
<div class="computer">
<div class="container">Computer chooses:</div>
<div id="computerInput"></div>
</div>
<div class="results">
<div class="container">Results:</div>
<div id="resultsOutput"></div>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
if( document.getElementById('quiz') ){
var userInput = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (userInput === "rock" || userInput === "paper" || userInput === "scissors") {
var userChoice = userInput
} else {
userChoice = "Invalid entry, sorry. "
}
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log("Computer: " + computerChoice);
document.getElementById("computerInput").innerHTML = computerChoice;
if( userChoice !== undefined ){
document.getElementById("userInput").innerHTML = userChoice;
compare(userChoice, computerChoice);
document.getElementById("resultsOutput").innerHTML = compare(userChoice, computerChoice)
}
}
}
function compare(choice1, choice2) {
if (userInput === "rock" || userInput === "paper" || userInput === "scissors") {
if (choice1 === choice2) {
return "The result is a tie!";
} else if (choice1 === "rock") {
if (choice2 === "scissors") {
return "rock wins";
} else {
return "paper wins"
}
} else if (choice1 === "paper") {
if (choice2 === "rock") {
return "paper wins";
} else {
return "scissors wins";
}
} else if (choice1 === "scissors") {
if (choice2 === "rock") {
return "rock wins";
} else {
return "scissors wins"
}
}
} else {
return "Results not calculated."
}
}
</script>
使用功能
$(window).load(function () {
});
您可以在执行 JavaScript 之前使用 JQuery 加载 HTML 页面。 类似的东西可以工作。
$(document).ready(init);
function init(){
//your JavaScript code here
}
如何仅在加载所有元素后才在头部加载 Javascript
[英]How to make Javascript in head load only after all elements has been loaded
Jquery，Django，Infinite Scroll在加载页面后加载其余元素
[英]Jquery, Django, Infinite Scroll load rest of elements after page is loaded
如何使JavaScript在页面加载后加载-尝试了所有解决方案
[英]How to make JavaScript to load after page loading - tried all solutions
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.