我正在尝试创建一个简单的石头，纸，剪刀游戏。我有一个工作版本here，但是正在尝试使用sweetalert添加自定义警报。现在，它弹出并要求我选择，但是当我单击我的选择时，它仅显示结果。我在chrome中检查了source面板，它不再将css列为来源。这里发生了什么？我究竟做错了什么？预先感谢您能提供的任何帮助。
body{
color: white;
font-size: 16vmin;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
#stat{
font-weight: 900;
}
#pag{
position: absolute;
bottom: 0px;
left: 0px;
height: 13vmax;
width: 100%;
border: 0px;
color: white;
font-family: 'Montserrat',sans-serif;
font-size: 5vmin;
background-color: rgb(96, 168, 236);
box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.438);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Rock Paper Scissors</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="main.js"></script>
</head>
<body id="bkg">
<iframe id="error" style="display:none;" width="100%" height="500px" src="https://www.youtube.com/embed/t3otBjVZzT0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<script>
rockpaperscissors();
function rockpaperscissors() {
var rps = ["rock","paper","scissors"];
var rand = rps[Math.floor(Math.random() * rps.length)];
swal({
title: "Rock, Paper, Scissors",
text: "Please choose either rock, paper, or scissors.",
icon: "",
buttons: {
r: {
text: "Rock",
value: "r",
},
p: {
text: "Paper",
value: "p",
},
s: {
text: "Scissors",
value: "s",
},
},
})
.then((value) => {
switch (value) {
case "r":
switch (rand) {
case "rock":
document.getElementById("bkg").style.backgroundColor = "#efe58d";
document.write("<span id='stat'>tie</span> ");
document.write(': The computer chose rock you chose rock <br>');
break;
case "paper":
document.getElementById("bkg").style.backgroundColor = "#ff928b";
document.write("<span id='stat'>loss</span> ");
document.write(': The computer chose paper you chose rock <br>');
break;
case "scissors":
document.getElementById("bkg").style.backgroundColor = "#9be592";
document.write("<span id='stat'>win</span> ");
document.write(': The computer chose scissors you chose rock <br>');
break;
default:
break;
};
break;
case "p":
switch (rand) {
case "rock":
document.getElementById("bkg").style.backgroundColor = "#9be592";
document.write("<span id='stat'>win</span> ");
document.write(': The computer chose rock you chose paper <br>');
break;
case "paper":
document.getElementById("bkg").style.backgroundColor = "#efe58d";
document.write("<span id='stat'>tie</span> ");
document.write(': The computer chose paper you chose paper <br>');
break;
case "scissors":
document.getElementById("bkg").style.backgroundColor = "#ff928b";
document.write("<span id='stat'>loss</span> ");
document.write(': The computer chose scissors you chose paper <br>');
break;
default:
break;
};
break;
case "s":
switch (rand) {
case "rock":
document.getElementById("bkg").style.backgroundColor = "#ff928b";
document.write("<span id='stat'>loss</span> ");
document.write(': The computer chose rock you chose scissors <br>');
break;
case "paper":
document.getElementById("bkg").style.backgroundColor = "#9be592";
document.write("<span id='stat'>win</span> ");
document.write(': The computer chose paper you chose scissors <br>');
break;
case "scissors":
document.getElementById("bkg").style.backgroundColor = "#efe58d";
document.write("<span id='stat'>tie</span> ");
document.write(': The computer chose scissors you chose scissors <br>');
break;
default:
break;
};
break;
default:
document.getElementById("error").style.display = "block";
break;
};
});
}
function reload(){
location.reload();
};
window.addEventListener('keydown', function(e) {
if (e.keyCode == 13 || e.keyCode == 32){
reload();
}
}
);
</script>
<button onclick="reload()" id="pag">Play Again</button>
</body>
</html>
答案 0 :(得分：1)
body{
color: white;
font-size: 16vmin;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
#stat{
font-weight: 900;
}
#pag{
position: absolute;
bottom: 0px;
left: 0px;
height: 13vmax;
width: 100%;
border: 0px;
color: white;
font-family: 'Montserrat',sans-serif;
font-size: 5vmin;
background-color: rgb(96, 168, 236);
box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.438);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Rock Paper Scissors</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="main.js"></script>
</head>
<body id="bkg">
<iframe id="error" style="display:none;" width="100%" height="500px" src="https://www.youtube.com/embed/t3otBjVZzT0" frameborder="0" allow="accelerometer; autoplay;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<script>
rockpaperscissors();
function rockpaperscissors() {
var rps = ["rock","paper","scissors"];
var rand = rps[Math.floor(Math.random() * rps.length)];
swal({
title: "Rock, Paper, Scissors",
text: "Please choose either rock, paper, or scissors.",
icon: "",
buttons: {
r: {
text: "Rock",
value: "r",
},
p: {
text: "Paper",
value: "p",
},
s: {
text: "Scissors",
value: "s",
},
},
})
.then((value) => {
switch (value) {
case "r":
switch (rand) {
case "rock":
msg = "The system chose rock. ";
document.getElementById("bkg").style.backgroundColor = "#efe58d";
document.getElementById("stat").innerHTML = msg + "Game is tied";
break;
case "paper":
msg = "The system chose paper. ";
document.getElementById("bkg").style.backgroundColor = "#ff928b";
document.getElementById("stat").innerHTML = msg + "You lose";
break;
case "scissors":
msg = "The system chose scissors. ";
document.getElementById("bkg").style.backgroundColor = "#9be592";
document.getElementById("stat").innerHTML = msg + "You win";
break;
default:
break;
};
break;
case "p":
switch (rand) {
case "rock":
msg = "The system chose rock. ";
document.getElementById("bkg").style.backgroundColor = "#9be592";
document.getElementById("stat").innerHTML = msg + "You win";
break;
case "paper":
msg = "The system chose paper. ";
document.getElementById("bkg").style.backgroundColor = "#efe58d";
document.getElementById("stat").innerHTML = msg + "Game is tied";
break;
case "scissors":
msg = "The system chose scissors. ";
document.getElementById("bkg").style.backgroundColor = "#ff928b";
document.getElementById("stat").innerHTML = msg + "You lose";
break;
default:
break;
};
break;
case "s":
switch (rand) {
case "rock":
msg = "The system chose rock. ";
document.getElementById("bkg").style.backgroundColor = "#ff928b";
document.getElementById("stat").innerHTML = msg + "You lose";
break;
case "paper":
msg = "The system chose paper. ";
document.getElementById("bkg").style.backgroundColor = "#9be592";
document.getElementById("stat").innerHTML = msg + "You win";
break;
case "scissors":
msg = "The system chose scissors. ";
document.getElementById("bkg").style.backgroundColor = "#efe58d";
document.getElementById("stat").innerHTML = msg + "Game is tied";
break;
default:
break;
};
break;
default:
document.getElementById("error").style.display = "block";
break;
};
});
}
function reload(){
location.reload();
};
window.addEventListener('keydown', function(e) {
if (e.keyCode == 13 || e.keyCode == 32){
reload();
}
}
);
</script>
<button onclick="reload()" id="pag">Play Again</button>
<div id="stat"></div>
</body>
</html>
您不应使用document.write()。它将清除所有先前的内容，包括<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>'，其中包括Sweetalert库。而是在HTML内容中添加带有id='stat'的div并在其上调用innerHTML属性。我已经修改了代码。看看。
答案 1 :(得分：0)
我认为您想念整个文档。如果您像
那样在分隔的div中编写anwser，效果会更好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Rock Paper Scissors</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<style>
body{
color: white;
font-size: 16vmin;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
#stat{
font-weight: 900;
}
#pag{
position: absolute;
bottom: 0px;
left: 0px;
height: 13vmax;
width: 100%;
border: 0px;
color: white;
font-family: 'Montserrat',sans-serif;
font-size: 5vmin;
background-color: rgb(96, 168, 236);
box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.438);
}
</style>
<link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="main.js"></script>
</head>
<body id="bkg">
<iframe id="error" style="display:none;" width="100%" height="500px" src="https://www.youtube.com/embed/t3otBjVZzT0"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div id="test">
</div>
<script>
function reload() {
document.location.reload();
};
window.onload = function () {
var test = document.getElementById("test");
rockpaperscissors();
function rockpaperscissors() {
var rps = ["rock", "paper", "scissors"];
var rand = rps[Math.floor(Math.random() * rps.length)];
swal({
title: "Rock, Paper, Scissors",
text: "Please choose either rock, paper, or scissors.",
icon: "",
buttons: {
r: {
text: "Rock",
value: "r",
},
p: {
text: "Paper",
value: "p",
},
s: {
text: "Scissors",
value: "s",
},
},
})
.then((value) => {
switch (value) {
case "r":
switch (rand) {
case "rock":
document.getElementById("bkg").style.backgroundColor = "#efe58d";
test.innerHTML = "<span id='stat'>tie</span> ";
test.innerHTML = ': The computer chose rock you chose rock <br>';
break;
case "paper":
document.getElementById("bkg").style.backgroundColor = "#ff928b";
test.innerHTML = "<span id='stat'>loss</span> ";
test.innerHTML = ': The computer chose paper you chose rock <br>';
break;
case "scissors":
document.getElementById("bkg").style.backgroundColor = "#9be592";
test.innerHTML = "<span id='stat'>win</span> ";
test.innerHTML = ': The computer chose scissors you chose rock <br>';
break;
default:
break;
};
break;
case "p":
switch (rand) {
case "rock":
document.getElementById("bkg").style.backgroundColor = "#9be592";
test.innerHTML = "<span id='stat'>win</span> ";
test.innerHTML = ': The computer chose rock you chose paper <br>';
break;
case "paper":
document.getElementById("bkg").style.backgroundColor = "#efe58d";
test.innerHTML = "<span id='stat'>tie</span> ";
test.innerHTML = ': The computer chose paper you chose paper <br>';
break;
case "scissors":
document.getElementById("bkg").style.backgroundColor = "#ff928b";
test.innerHTML = "<span id='stat'>loss</span> ";
test.innerHTML = ': The computer chose scissors you chose paper <br>';
break;
default:
break;
};
break;
case "s":
switch (rand) {
case "rock":
document.getElementById("bkg").style.backgroundColor = "#ff928b";
test.innerHTML = "<span id='stat'>loss</span> ";
test.innerHTML = ': The computer chose rock you chose scissors <br>';
break;
case "paper":
document.getElementById("bkg").style.backgroundColor = "#9be592";
test.innerHTML = "<span id='stat'>win</span> ";
test.innerHTML = ': The computer chose paper you chose scissors <br>';
break;
case "scissors":
document.getElementById("bkg").style.backgroundColor = "#efe58d";
test.innerHTML = "<span id='stat'>tie</span> ";
test.innerHTML = ': The computer chose scissors you chose scissors <br>';
break;
default:
break;
};
break;
default:
document.getElementById("error").style.display = "block";
break;
};
});
}
window.addEventListener('keydown', function (e) {
if (e.keyCode == 13 || e.keyCode == 32) {
reload();
}
}
);
}
</script>
<button onclick="reload()" id="pag">Play Again</button>
</body>
</html>