I’m trying to write a javascript app where the user guesses the amount of dots displayed on a screen, and will return whether or not their answer was correct.
I’m getting “Sorry, the correct answer was NaN. Try again!” when NaN should be the number of dots displayed. Here’s my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guess the Dots Game</title>
<style>
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Guess the Dots Game</h2>
<p>Count how many dots are displayed:</p>
<canvas id="canvas" width="400" height="400"></canvas>
<br>
<button onclick="startGame()">Show Dots</button>
<p>Enter your guess:</p>
<input type="number" id="guess" min="0" placeholder="Enter your guess">
<button onclick="checkGuess()">Check Guess</button>
<p id="result"></p>
<script>
// Function to generate random dots on the canvas
function generateRandomDots() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const numDots = Math.floor(Math.random() * 20) + 1; // Generate between 1 to 20 dots
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear previous dots
ctx.fillStyle = 'black';
for (let i = 0; i < numDots; i++) {
let x = Math.random() * (canvas.width - 10) + 5; // Random x position within canvas
let y = Math.random() * (canvas.height - 10) + 5; // Random y position within canvas
ctx.beginPath();
ctx.arc(x, y, 3, 0, 2 * Math.PI);
ctx.fill();
}
return numDots;
}
// Function to start the game by showing dots
function startGame() {
const numDots = generateRandomDots();
const resultElement = document.getElementById('result');
resultElement.textContent = ''; // Clear previous result message
}
// Function to check user's guess
function checkGuess() {
const guessInput = document.getElementById('guess');
const guess = parseInt(guessInput.value);
const numDots = parseInt(document.getElementById('result').textContent); // Get the number of dots from the hidden result element
const resultElement = document.getElementById('result');
if (isNaN(guess)) {
resultElement.textContent = 'Please enter a valid number.';
} else {
if (guess === numDots) {
resultElement.textContent = 'Congratulations! You guessed correctly.';
} else {
resultElement.textContent = `Sorry, the correct answer was ${numDots}. Try again!`;
}
}
guessInput.value = ''; // Clear input field after checking guess
}
</script>
</body>
</html>
Tried to change order, using let instead of const. Can’t seem to get it down. I’m quite new to JS, if that isn’t too apparent (haha). Would appreciate the help!