Closed
Bug 1394177
Opened 8 years ago
Closed 6 years ago
Number Guessing Game
Categories
(Developer Documentation Graveyard :: General, enhancement, P5)
Tracking
(Not tracked)
RESOLVED
INVALID
People
(Reporter: ojdiaz05, Assigned: cmills)
References
()
Details
:: Developer Documentation Request
Request Type: Correction
Gecko Version: unspecified
Technical Contact:
:: Details
Hi, I am working myself on the tutorial for "guessing game" through MDN. But once all is compiled and I add a value to the field to submit, nothing happens.
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash
|
Assignee | |
Comment 1•8 years ago
|
||
Hi there,
Can you send me your source code? I'll have a look and try to work out what is going wrong. Pasting it into a comment on this bug will be fine.
Additionally, have you looked at your browser's JavaScript console to see if it is giving you any errors when you try to run your code?
Thanks.
Assignee: nobody → cmills
Hi Chris,
First off, thanks for the reply.
This is the error I receive through the console:
"SyntaxError: Unexpected token =
at https://static.jsbin.com/js/prod/runner-4.0.4.min.js:1:13850
at https://static.jsbin.com/js/prod/runner-4.0.4.min.js:1:10792"
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Number guessing game</title>
<style>
html{
font-family: sans-serif;
}
body{
width: 50%;
max-width: 800px;
min-width: 480px;
margin: 0 auto;
}
.lastResult{
color: white;
padding: 3px;
}
</style>
</head>
<body>
<h1>Number guessing game</h1>
<p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p>
<div class="form">
<label for="guessField">Enter a guess:</label><input type="text" id="guessField" class="guessField">
<input type="submit" value="Submit guess" class="guessSubmit"></div>
<div class="resultParas">
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>
</body>
<script>
var randomNumber = Math.floor(Math.random() * 100) + 1;//0 is inclusive, 1 is exlcusive for Math.random
var guesses = document.querySelector('.guesses');
var lastResult = document.querySelector('.lastResult');
var lowOrHi = document.querySelector('.lowOrHi');
var guessSubmit = document.querySelector('.guessSubmit');
var guessField = document.querySelector('.guessField');
var guessCount = 1;
var resetButton;
guessField.focus();
function checkGuess(){
var userGuess = Number(guessField.value);
if (guessCount === 1){
guesses.textContent = 'Previous guesses: ';
}
guesses.textContent += userGuess + ' ';
if (userGuess ==== randomNumber){
lastResult.textContent = 'Congratulations, you got it right!';
lastResult.style.backgroundColor = 'green';
lowOrHi.textContent = '';
setGameOver();
}else if (guessCount === 10){
lastResult.textContent = '!!!GAME OVER!!!';
lowOrHi.textContent = '';
setGameOver();
}else{
lastResult.textContent = 'Wrong!';
lastResult.style.backgroundColor = 'red';
if(userGuess < randomNumber){
lowOrHi.textContent = 'Last guess was too low!';
}else if(userGuess > randomNumber){
lowOrHi.textContent = 'Last guess was too high!';
}
}
guessCount++;
guessField.value = '';
}
guessSubmit.addEventListener('click', checkGuess);
function setGameOver(){
guessField.disabled = true;
guessSubmit.disabled = true;
resetButton = document.createElement('button');
resetButton.textContent = 'Start new game';
document.body.appendChild(resetButton);
resetButton.addEventListner('click',resetGame);
}
function resetGame(){
guessCount = 1;
var resetParas = document.querySelectorAll('.resultParas p');
for (var i=0; i<resetParas.length;i++){
resetParas[i].textContent = '';
}
resetButton.parentNode.removeChild(resetButton);
guessField.disabled = false;
guessSubmit.disabled = false;
guessField.value = '';
guessField.focus();
lastResult.style.backgroundColor = 'white';
randomNumber = Math.floor(Math.random()* 100) +1;
}
</script>
</html>
|
|
Assignee | |
Comment 3•8 years ago
|
||
Thanks!
So looking at your code, there are a couple of typos that are stopping your example from working.
1. In the line
if (userGuess ==== randomNumber){
==== should be ===
When I first loaded up the example, I got the message "SyntaxError: expected expression, got '=' [Learn More] test.html:57:24" in the console, which enabled me to find this fairly easily.
2. When I won the game, the console came up with the error "TypeError: resetButton.addEventListner is not a function [Learn More] test.html:87:8" - you can see here that "Listner" is spelt wrong on line 87.
After that, the game works fine.
|
||
Updated•6 years ago
|
Status: UNCONFIRMED → RESOLVED
Closed: 6 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•