gpt4 book ai didi

javascript - 如何在加载其他页面元素后加载 javascript?

转载 作者:行者123 更新时间:2023-11-27 23:23:15 25 4
gpt4 key购买 nike

所以我用 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
})

关于javascript - 如何在加载其他页面元素后加载 javascript?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39981914/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com