I am trying to create a simple rock, paper, scissors game. I have a working version found here, but was trying to add custom alerts using sweetalert. Now it pops up and asks me for my choice, but when I click my choice it only displays the result. I checked in the sources panel in chrome and it no longer lists my css as a source. What is going on here? What am I doing wrong? Thanks in advance for any help you are able to provide.
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>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>You shouldn't use document.write(). It flushes out the entire previous content, including the <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>' which includes the Sweetalert libary. Instead add a div with id='stat' in the HTML content and call the innerHTML property on it. I've modified the code. Take a look.