[英]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.