1

I'm working on what should be an extremely simple "guess my number" game in Javascript, however, I can't get it to work correctly.

The program is supposed to choose a random integer between 1 and 10 and allow the user to try and guess that number as many times as it takes to get it right. If the user guesses a number that's lower than the correct one, the program is supposed to display a "your guess is too low" message, this is the same for when the guess is too high, or correct. The program must display the message on the webpage, not in an alert or any type of pop-up. Also, the program is supposed to keep a running list of the numbers that have been guessed by the user and display them on the page each time the user makes a guess (I want this list to display below my heading "Here are the numbers you've guessed so far:"). And finally, the program is supposed to display a "you already tried using that number" message if the user tries to input a number that they've already used.

Here is my code, along with a JSfiddle I've created and am still playing with. 

<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">
        <title>Guess My Number</title>

        <script type = "text/javascript">
            var tries = [];
            game = {
                 num : 0,
                 turns : 1,
                 reset : function() {
                        this.turns = 1;
                        this.newNum();
                 },
                 newNum : function() {
                    this.num = parseInt(Math.random(), 10) + 1;
                 },
                 guessNumber : function(guess) {
                        try {
                            guess = parseInt(guess, 10);
                        }
                        catch (e) {
                            document.getElementById("guess").value = "Enter a guess.";
                            this.turns++;
                            return false;
                        }
                        if (guess == this.num) {
                            document.getElementById("result").value = "Correct! It took you " + this.turns + " tries to guess my number.";
                            tries.push(document.getElementById("guess").value);
                            display();
                            document.getElementById("guess").value = " ";
                            return true;
                        }
                        else if(guess > this.num) {
                            document.getElementById("result").value = "Your guess is too high. Try again.";
                            tries.push(document.getElementById("guess").value;
                            display();
                            document.getElementById("guess").value = " ";
                            return false;
                        }
                        else if(tries.indexOf(guess) != -1 {   
                            document.getElementById("result").value = "You have already guessed that number. Try again.";
                            document.getElementById("guess").value = " ";
                            return false;
                        }
                        else {
                            document.getElementById("result").value = "Your guess is too low. Try again.";
                            tries.push(document.getElementById("guess").value;
                            display();
                            document.getElementById("guess").value = " ";
                            return false;  
                        }
                    }
                    function display() {
                        var number = ";
                            for(i=0; i<tries.length; i++) {
                                    number += tries[i] + "<br >";
                            }
                            document.getElementById("tries").innerHTML = number;
                    }
                    function guessNumber() {
                        var guess = document.getElementById("guess").value;
                        game.guessNumber(guess);
                        document.getElementById("guess").value = " ";
                    }
                    function resetGame() {
                        game.reset();
                        document.getElementById("guess").value = " ";
                    }
                    resetGame();
            }
        </script>
    </head>

    <body>
        <h1>Would You Like To Play A Game?</h1>
        <h3>Directions:</h3>
                <p>
                The game is very simple. I am thinking of a non-decimal number between 1 and 10, it is your job to guess what that number is. If you guess incorrectly on your first attempt, don't worry. You can keep guessing until you guess my number.
            </p>
        <h3>Thanks for playing and good luck!</h3>
        <h3>Created by Beth Tanner</h3>
        <p>Your Guess:
            <input type = "text" id = "guess" size = "10" />
            <br />
            <input type = "button" value = "Submit Guess" onclick = "guessNumber()" onclick = "display()" />
            <input type = "reset" value = "Reset Game" onclick = "resetGame()" />
        </p>
        <h3>How'd you do?</h3>
            <div id = "result">
                <input type = "text" id = "result" size = "20" />
            </div>
        <h3>Here are the numbers you've guessed so far:</h3>
    </body>
</html>

http://jsfiddle.net/v09ttL74/

As you should be able to see from the fiddle, nothing is happening when I click either one of the buttons, so I'm not really sure where the problem is. I am getting a few errors when I select the JShints option on the fiddle, but most are things like "Missing semicolon" in places where there's not supposed to be a semicolon, like an one line where all I have written is

else {

Any suggestions would be greatly appreciated. I feel like this is just a really simple project that I am over-thinking since I'm stressed about it not working.

Improve this question
5
  • 1
    Your JavaScript is verry bad formatted. Go to jshint.com and make sure all errors are gone. else if(tries.indexOf(guess) != -1 { come on... You'r serious? Commented Sep 16, 2014 at 7:03
  • var number = "; A single double quote... Commented Sep 16, 2014 at 7:04
  • Where is game defined? Are you missing a var? Commented Sep 16, 2014 at 7:08
  • @AndreasFurster I'm actually agreeing with your initial sentiment on this one, deleting my answer. Commented Sep 16, 2014 at 7:10
  • Thanks to all of your help, I've gotten this running almost perfectly. The only problem I'm having now is getting it to display a "you already tried that number" message if the user attempts to input a number they've already guessed. Any ideas how I can do this since clearly my else if (tries.indexOf(guess) != -1) { code isn't working right? Commented Sep 16, 2014 at 7:47

2 Answers 2

Reset to default
2

There's a lot of issues in your code. Just to mention a few...

1- Unclosed parenthesis here

tries.push(document.getElementById("guess").value;

it should be...

tries.push(document.getElementById("guess").value);

2- Expression not terminated with a close parenthesis here

else if(tries.indexOf(guess) != -1 {

it should be...

else if(tries.indexOf(guess) != -1) {

3- Wrong declaration of functions inside a function

function display() {
                    var number = ";
                        for(i=0; i<tries.length; i++) {
                                number += tries[i] + "<br >";
                        }
                        document.getElementById("tries").innerHTML = number;
                }
                function guessNumber() {
                    var guess = document.getElementById("guess").value;
                    game.guessNumber(guess);
                    document.getElementById("guess").value = " ";
                }
                function resetGame() {
                    game.reset();
                    document.getElementById("guess").value = " ";
                }

I could be going forever but, really, the errors are a bit obvious

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Alright as some of the answers must have already given you an idea of how many mistakes your Script as well as HTML code had.. from missing parenthesis to same ids to missing elements. Well i have corrected them and it's working now:

<h1>Would You Like To Play A Game?</h1>
<h3>Directions:</h3>
    <p>
        The game is very simple. I am thinking of a non-decimal number between 1 and 10, it is your job to guess what that number is. If you guess incorrectly on your first attempt, don't worry. You can keep guessing until you guess my number.
</p>
<h3>Thanks for playing and good luck!</h3>
<h3>Created by Beth Tanner</h3>
<p>Your Guess:
    <input type = "text" id = "guess" size = "10" />
    <br />
    <input type = "button" value = "Submit Guess" onclick = "guessNumber()" onclick = "display()" />
    <input type = "reset" value = "Reset Game" onclick = "resetGame()" />
</p>
<h3>How'd you do?</h3>

    <input type = "text" id = "result" size = "20" />

<h3>Here are the numbers you've guessed so far:</h3>
<p id='tries'></p>

Script:

var tries = [];
game = {
    num : 0,
    turns : 1,
    reset : function() {
        this.turns = 1;
        this.newNum();
    },
    newNum : function() {
        this.num = parseInt(Math.random() * 10) + 1;
    },
    guessNumber : function(guess) {
        try {        
            guess = parseInt(guess, 10);
        }
        catch (e) {
            document.getElementById("guess").value = "Enter a guess.";
            this.turns++;
            return false;
        }
        alert(guess+ ' '+this.num);
        if (guess == this.num) {
            document.getElementById("result").value = "Correct! It took you " + this.turns + " tries to guess my number.";
            tries.push(document.getElementById("guess").value);
            display();
            document.getElementById("guess").value = " ";
            return true;
        }
        else if(tries.indexOf(guess) != -1) {   
            document.getElementById("result").value = "You have already guessed that number. Try again.";
            document.getElementById("guess").value = " ";
            return false;
        }
        else if(guess > this.num) {
            document.getElementById("result").value = "Your guess is too high. Try again.";
            tries.push(document.getElementById("guess").value);
            display();
            document.getElementById("guess").value = " ";
            return false;
        }
        else if(guess < this.num){          
            document.getElementById("result").value = "Your guess is too low. Try again.";
            tries.push(document.getElementById("guess").value);
            display();
            document.getElementById("guess").value = " ";
            return false;  
        }


    }
}
    function display() {
        var number = "";
        for(i=0; i<tries.length; i++) {
            number += tries[i] + "<br >";
        }
        document.getElementById("tries").innerHTML = number;
    }
    function guessNumber() {
        var guess = document.getElementById("guess").value;
        game.guessNumber(guess);
        document.getElementById("guess").value = " ";
    }
    function resetGame() {
        game.reset();
        document.getElementById("guess").value = " ";
    }
    resetGame();

See the DEMO here

Improve this answer

1 Comment

Awesome, thanks a bunch! Just gotta fix a few minor details, like it's not displaying a message if the user enters the same number twice, and the reset button isn't clearing out the list of previously guessed numbers, but other than that it's perfect.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.