如何在加载其他页面元素后加载javascript？
所以我用HTML制作了这个石头剪刀游戏。当页面加载时，它通过弹出窗口请求用户输入。问题是弹出窗口在我的任何div之前加载，我希望在弹出脚本启动之前所有html元素都可见 这是我的密码：如何在加载其他页面元素后加载javascript？,javascript,html,Javascript,Html,所以我用HTML制作了这个石头剪刀游戏。当页面加载时，它通过弹出窗口请求用户输入。问题是弹出窗口在我的任何div之前加载，我希望在弹出脚本启动之前所有html元素都可见 这是我的密码： <body> <div class="user"> <div class="container">You choose:</div> <div id="userInput"></div> <
<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>
您可以选择：
计算机选择：
结果：
var userInput=prompt（“您选择石头、布还是剪刀？”）；
var computerChoice=Math.random（）；
如果（userInput==“rock”| | userInput==“paper”| | userInput==“剪刀”）{
var userChoice=userInput
}否则{
userChoice=“输入无效，抱歉。”
}
如果（计算机选择<0.34）{
computerChoice=“rock”；
}否则，如果（计算机选择使用该功能
$(window).load(function () {
});
在执行JavaScript之前，可以使用JQuery加载HTML页面
$(document).ready(init);
function init(){
//your JavaScript code here
}
在加载页面其余部分之前执行javascript
您试图使用window.onload
，但您做得不对。
window.onload
应该是一个函数，如下所示：
window.onload = function(){
//your code here
}
但这只适用于只有一个函数要在页面加载时启动的情况。一般来说，最好使用window.addEventListener方法，因为您可以使用其中的多个函数，所有函数都将被执行
如果要使用另一个window.onload=function（）{}
，它将覆盖第一个
这就是为什么我推荐使用：
window.addEventListener('load',function(){
//your code here
})
你可以做三件事
在html页面的结束正文标记之前添加脚本标记
将您的逻辑称为身体onload事件的一部分
document.body.onload=function（）{
console.log（'I-load！'）；
}；
如果使用jquery，则可以通过执行以下操作获得与上述相同的结果：
$（函数（）{
console.log（'I-load！'）；
})（jQuery）；
如果使用jQuery，Hero1134是完全正确的
$(document).ready(function(){ })
DOM准备就绪后，.ready函数将立即执行（加载html元素并准备对其进行处理）。如果使用.load，则将等待页面上的每个元素全部加载，因此您必须等待大型图像加载。在某些页面上，这两种方法之间的差异可能只有几秒钟
您也可以在文件末尾运行脚本
<body>
<divs />
<script>var userInput = prompt("Do you choose rock, paper or scissors?"); ...</script>
</body>
而是这样
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
});
解决方案1:
您可以将脚本放在HTML文档的底部。这将在加载
元素后运行代码：
<html>
<head></head>
<body>
<div></div>
<div></div>
<div></div>
...
<script>
// Put your JS code here
</script>
</body>
</html>
</html>
也许你可以试试这个
<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.onload=函数（）{
if（document.getElementById（'quick'））{
var userInput=prompt（“您选择石头、布还是剪刀？”）；
var computerChoice=Math.random（）；
如果（userInput==“rock”| | userInput==“paper”| | userInput==“剪刀”）{
var userChoice=userInput
}否则{
userChoice=“输入无效，抱歉。”
}
如果（计算机选择<0.34）{
computerChoice=“rock”；
}else if（computerChoice）我认为您需要在这里创建一个强调最小值的元素，包括您（在上下文中）使用的
元素这将是一个好的MCVETBF的一部分。我删除了上下文以使问题更易于阅读。回滚和近似可能重复什么？为什么？这没有意义引用错误$
未定义窗口。addEventListener（'load'，function（）{}）
是正确的方法。请参阅本文以了解更多信息。希望它能有所帮助。它仍然可以工作。我的意思是，我现在也在使用它。我的大部分代码都是javascript。所有问题的答案都不是jQuery！！我同意，但我想这是另一种方法，我认为它会有所帮助！我真的不明白。jQuery不是也是一个库吗这是一个Javascript库，可以让你做同样的事情，但只需要很少的代码行code@Hero1134：加载一个膨胀的库只是为了让代码在DOM就绪时运行，这将是愚蠢的。
window.onload = function() {
// Put your JS 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>