Hi there, I am a beginner in the world of JavaScript and currently working on developing a small guessing game app. However, I have encountered an issue where the page is not reloading after the game is over and the 'Play Again' button appears to be disabled instead of triggering a reload.
I would greatly appreciate your assistance with this problem as I have been unable to resolve it on my own.
let min = 1, max = 10, winnerNum = RandNum(max,min), gussNum = 3;
// UI variables
let game = document.querySelector('#game'),
minNum = document.querySelector('.min-num'),
maxNum = document.querySelector('.max-num'),
gussBtn = document.querySelector('#gussBtn'),
gussInput = document.querySelector('#input'),
message = document.querySelector('.msg');
// assigning min and max values
minNum.textContent = min;
maxNum.textContent = max;
// reload the game upon button click
game.addEventListener('mousedown', function(e){
if(e.target.className ==='play-again'){
window.location.reload();
// Why isn't the page being reloaded??
}
});
// listening for guessed number input
gussBtn.addEventListener('click', function(){
let guss = parseInt(gussInput.value);
console.log(guss);
// validate user input
if(guss===winnerNum){
gameOver(true,`Winner Winner Chicken Dinner, Yes ${winnerNum} is the correct number`)
} else{
gussNum -= 1;
if(gussNum===0){
gameOver(false,`You lost game over, the correct number is ${winnerNum}`)
} else if(gussNum<0){
gussBtn.disabled=true;
gussInput.disabled=true;
} else {
gussInput.disabled=true;
gussInput.style.borderColor = 'red';
gussInput.value = '';
setMessage(`You have ${gussNum} left!`, 'red')
}
}
});
function gameOver(won,msg){
let color;
won === true ? color = 'green' : color='red';
gussInput.disabled=true;
gussInput.style.borderColor = color;
// gussBtn.disabled=true;
setMessage(msg, color);
gussBtn.value='Play Again';
gussBtn.classList.add('play-again');
}
function RandNum(max,min) {
return Math.floor(Math.random()*(max-min+1)-min);
}
function setMessage(msg, color) {
message.textContent = msg;
message.style.color = color;
}
HTML Section
<body>
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card card-body text-center mt-5">
<h1 class="heading display-5 pb-3">Game Gusser</h1>
<p>Guess a number between <span class="min-num"></span> and <span class="max-num"></span></p>
<div class="form-group" id="game">
<div class="input-group">
<input type="number" class="form-control" id="input" placeholder="Enter your guess...">
<input type="submit" class="btn btn-dark btn-block mt-4" id="gussBtn">
</div>
<p class="msg mt-4"></p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>
The desired outcome is for the Play Again button to trigger a page reload so that users can enjoy playing the game again seamlessly.