[ad_1]
My modal window that appears after my rock, paper, scissors game is over has a function that resets the game. I have tried to also add a function that closes the window when I click the reset game button after it runs the reset game function. I’ve tried to take what is in the close span object button as a guide and apply it to the resetGame button but it is not working, I added a closeModal function but that is not doing anything. Not sure what I am missing here?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.typekit.net/rcz1ikf.css">
<link rel="shortcut icon" href="favicon.ico" />
<script src="https://kit.fontawesome.com/4c536a6bd5.js"
crossorigin="anonymous">
</script>
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="heading">
<h1>ROCK PAPER SCISSORS</h1>
</header>
<div class ="rps">
<h2>CHOOSE YOUR WEAPON</h2>
<h3 class="score-message" id="scoreMessage">
FIRST TO SCORE 5 POINTS WINS THE GAME</h3>
</h3>
</div>
<div class="score-container">
<div class="score-box">
<div class="sign" id="playerSign">❔</div>
<h2 class="score" id="playerScore" data-score="0">PLAYER:0</h2>
</div>
<div class="score-box">
<div class="sign" id="computerSign">❔</div>
<h2 class="score" id="computerScore" data-score="0">COMPUTER:0</h2>
</div>
</div>
<div class="button-box">
<input type="image" src="./images/Rock.png" id="rockBtn">
<input type="image" src="./images/Paper.png" id="paperBtn">
<input type="image" src="./images/Scissors.png" id="scissorsBtn">
</div>
<!--- The Modal --->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Game Over!
</p>
<button id="newGame"> Restart Game </button>
</div>
</body>
<footer>
COPYRIGHT © <script>new Date().getFullYear()>2010&&document.write(+new Date().getFullYear());</script>
<! -- github icon --!>
<a href="https://github.com" target="_blank">
<i class="fab fa-github">
</i>
</a>
</footer>
<script src="main.js"></script>
</html>
JS
//Score Start//
var playerScore = 0;
var computerScore = 0;
let roundWinner="";
//Win Lose Messages//
let playerWinRound = "You won this round!";
let computerWinRound = "You lost this round!";
let draw = "Draw, play again.";
let playerWins = "You won the game!";
let computerWins = "You lost the game!";
//Define Buttons//
const rock = document.getElementById("rockBtn");
const paper = document.getElementById("paperBtn");
const scissors = document.getElementById("scissorsBtn");
const playerSign = document.getElementById("playerSign");
const scoreMessage = document.getElementById("scoreMessage");
const pScore = document.getElementById("playerScore");
const cScore = document.getElementById("computerScore");
var spanObject = document.getElementsByClassName("close")[0];
var resetGame = document.getElementById("newGame");
rock.addEventListener('click', function() {
playerSign.innerHTML = '<img src="./images/Rock.png" alt="Rock"/>';
playRound('rock', getRandomChoice());
});
paper.addEventListener('click', function() {
playerSign.innerHTML = '<img src="./images/Paper.png" alt="Paper"/>';
playRound('paper', getRandomChoice());
});
scissors.addEventListener('click', function() {
playerSign.innerHTML = '<img src="./images/Scissors.png" alt="Scissors"/>';
playRound('scissors', getRandomChoice());
});
//Restart Game Button//
resetGame.addEventListener('click', function(){
beginNewGame(playerScore,computerScore);
closeModal();
});
//Play round function//
function playRound(playerSelection, computerSelection) {
if (playerSelection === computerSelection) {
roundWinner="tie";
}
if (
(playerSelection === 'rock' && computerSelection === 'scissors') ||
(playerSelection === 'scissors' && computerSelection === 'paper') ||
(playerSelection === 'paper' && computerSelection === 'rock')
) {
pScore.dataset.score = parseInt(pScore.dataset.score) + 1;
pScore.textContent = "PLAYER:" + pScore.dataset.score;
roundWinner="player";
}
if (
(computerSelection === 'rock' && playerSelection === 'scissors') ||
(computerSelection === 'scissors' && playerSelection === 'paper') ||
(computerSelection === 'paper' && playerSelection === 'rock')
) {
cScore.dataset.score = parseInt(cScore.dataset.score) + 1;
cScore.textContent = "COMPUTER:" + cScore.dataset.score;
roundWinner="computer";
}
if (parseInt(pScore.dataset.score) === 5 || parseInt(cScore.dataset.score) === 5) {
showModal();
}
console.log("Computer: " + computerSelection + ", Player: " + playerSelection + ", Winner: " + roundWinner + ".");
updateScoreMessage(roundWinner, playerSelection, computerSelection);
}
function getRandomChoice() {
let computerSign = document.getElementById("computerSign");
let rndChoice = Math.floor(Math.random() * 3);
var txtChoice;
switch (rndChoice) {
case 0:
computerSign.innerHTML = '<img src="./images/Rock.png" alt="Rock"/>';
txtChoice="rock";
break;
case 1:
computerSign.innerHTML = '<img src="./images/Paper.png" alt="Paper"/>';
txtChoice="paper";
break;
case 2:
computerSign.innerHTML = '<img src="./images/Scissors.png" alt="Scissors"/>';
txtChoice="scissors";
break;
}
return txtChoice;
}
function updateScoreMessage(winner, playerSelection, computerSelection) {
var txtMessage="";
if (winner === 'player') {
scoreMessage.textContent="You win! " + flCapital(playerSelection) + ' beats ' + flCapital(computerSelection) + '!';
return;
}
if (winner === 'computer') {
scoreMessage.textContent="You lose! " + flCapital(computerSelection) + ' beats ' + flCapital(playerSelection) + '!';
return;
}
scoreMessage.textContent="Your selection: " + flCapital(playerSelection) + ' ties with ' + flCapital(computerSelection) + '!';
}
//Restart Game Function//
function beginNewGame(playerScore,computerScore) {
pScore.dataset.score = 0;
cScore.dataset.score = 0;
roundWinner="";
scoreMessage.textContent="FIRST TO SCORE 5 POINTS WINS THE GAME";
pScore.innerHTML = 'PLAYER:' + pScore.dataset.score;
cScore.innerHTML = 'COMPUTER:' + cScore.dataset.score;
//computerScore = parseInt(cScore.dataset.score) = 0;
//playerScore = parseInt(pScore.dataset.score) = 0;
playerSign.innerHTML = '❔';
computerSign.innerHTML = '❔';
}
//Modal Function//
function showModal() {
///Get the modal
document.getElementById('myModal').style.display = "block";
var spanObject = document.getElementsByClassName("close")[0];
spanObject.onclick = function() {
closeModal();
}
};
//Close the Modal
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
//GitHub icon//
function flCapital(str) {
if (!str) return;
return str.match("^[a-z]") ? str.charAt(0).toUpperCase() + str.substring(1) : str;
}
[ad_2]