所以我用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>
答案 0 :(得分:3)
您的javascript在加载页面的其余部分之前执行
您正在尝试使用CreateMap<Cart, CartModel>()
.ForMember(dest => dest.LineItems, opt => opt.MapFrom(src => src.LineItems))
.ForMember(dest => dest.LineItems.Select(x => x.CustomField),
opt => opt.MapFrom(src => src.LineItems.Select(y => y.Description)));
,但您做错了。
Dim x, z
Set a = Sheets("Working")
Set b = Sheets("Peer Review")
Set c = Sheets("Waiting to Push")
Set d = Sheets("Completed")
x = 1
z = 2
Do Until IsEmpty(a.Range("I" & z))
If a.Range("I" & z) = "Peer" Then
x = x + 1
b.Rows(x).Value = a.Rows(z).Value
Else
If a.Range("I" & z) = "Waiting" Then
x = x + 1
c.Rows(x).Value = a.Rows(z).Value
End If
End If
z = z + 1
Loop
应该是一个函数,如下所示:
window.onload
但这只适用于你只想在页面加载时启动一个功能的情况。一般来说,最好使用window.addEventListener方法,因为你可以使用多个方法,所有方法都将被执行。
如果你使用另一个window.onload
,它将覆盖第一个。
这就是我推荐使用的原因:
window.onload = function(){
//your code here
}
答案 1 :(得分:1)
解决方案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
};
答案 2 :(得分:0)
你可以做三件事。
将您的逻辑称为身体onload事件的一部分
document.body.onload = function() {
console.log('I loaded!');
};
如果您使用的是jquery,可以通过执行以下操作获得与上面相同的结果:
$(function() {
console.log('I loaded!');
})(jQuery);
答案 3 :(得分:0)
如果你使用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>
因此脚本可以使用这些元素。
如果您只想使用没有依赖关系的Plain Old 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?"); ... }
答案 4 :(得分:0)
你有两个选择 1.在JavaScript中你可以像下面的语法
那样做document.addEventListener('DOMContentLoaded', function() {
// your code here
}, false);
2.在Jquery中这样做
$(document).ready(function(){
// your code here
});
答案 5 :(得分:0)
也许你可以试试这个......
<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>
答案 6 :(得分:-1)
使用功能
$(window).load(function () {
});
答案 7 :(得分:-1)
您可以在执行JavaScript之前使用JQuery加载HTML页面。类似的东西可以起作用。
$(document).ready(init);
function init(){
//your JavaScript code here
}