Home/ Questions/Q 7695979
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T21:40:23+00:00

I’m having a problem with the following code snippet: <!DOCTYPE html> <html> <head> <title>Hangman</title>

  • 0

I’m having a problem with the following code snippet:

<!DOCTYPE html>
<html>
    <head>
        <title>Hangman</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script type="text/javascript">
        <!--
        gallows = new Array("--------\n|      |\n|\n|\n|\n|\n=====",
        "--------\n|      O\n|\n|\n|\n|\n=====",
        "--------\n|      O\n|      |\n|\n|\n|\n=====",
        "--------\n|      O\n|     \\|\n|\n|\n|\n=====",
        "--------\n|      O\n|     \\|/\n|\n|\n|\n=====",
        "--------\n|      O\n|     \\|/\n|      |\n|\n|\n=====",
        "--------\n|      O\n|     \\|/\n|      |\n|     /\n|\n=====",
        "--------\n|      O\n|     \\|/\n|      |\n|     / \\\n|\n=====");

        guessChoices = new Array("JavaScript", "Navigator", "LiveConnect", "LiveWire");

        guessed = [];

        function startAgain()
        {
            guesses = 0;
            max = gallows.length - 1;
            //guessed = " ";
            len = guessChoices.length - 1;
            toGuess = guessChoices[Math.round(len*Math.random())].toUpperCase();
            displayHangman();
            displayToGuess();
            displayGuessed();
        }

        function stayAway()
        {
            document.game.elements[3].focus();
            alert("Don't mess with this form element!");
        }

        function displayHangman()
        {
            document.game.status.value=gallows[guesses];
        }

        function displayToGuess()
        {
            pattern = "";

            for(i=0;i<toGuess.length;++i)
            {
                if(guessed.indexOf(toGuess.charAt(i)) != -1)
                    pattern += (toGuess.charAt(i)+" ");
                else pattern += "_ ";
            }

            document.game.toGuess.value=pattern;
        }

        function displayGuessed(s)
        {

            result="";

            for(i in s)
            {
                guess=s[i];
                result += guess;
            }

            document.game.guessed.value=result;

            //document.game.guessed.value=guessed;
        }

        function badGuess(s)
        {
            if(toGuess.indexOf(s) == -1) return true;
            return false;
        }

        function winner()
        {
            for(i=0;i<toGuess.length;++i)
            {
                if(guessed.indexOf(toGuess.charAt(i)) == -1) return false;
            }
            return true;
        }

        function guess(s)
        {
            if(guessed.indexOf(s) == -1) guessed.push(s);
            if(badGuess(s)) ++guesses;
            displayHangman();
            displayToGuess();
            displayGuessed(guessed);
            if(guesses >= max)
            {
                alert("You're dead. The word you missed was "+toGuess+".");
                startAgain();
            }
            if(winner()) 
            {
                alert("You won!");
                startAgain();
            }
        }
        // -->
        </script>
    </head>
        <body>
            <h1>Hangman</h1>
            <form name="game">
                <pre>
                    <textarea name="status" rows="7" cols="16" onfocus="stayAway();"></textarea>
                </pre>

                <p>
                    <input type="text" name="toGuess" onfocus="stayAway();"> Word to guess<br>
                    <input type="text" name="guessed" onfocus="stayAway();"> Letters guessed so far<br>
                </p>

                <p>Enter your next guess.</p>

                <p>
                    <input type="text" name="input" size=1 value="">
                    <input type = "button" value = "guess" onclick = "guess(game.input.value); game.input.value = '';">
                </p>

                <input type="button" name="restart" value="---- Start Again ----" onclick="startAgain();">

                <script type="text/javascript">
                    <!--
                    startAgain();
                    // -->
                </script>
            </form>
        </body>
</html>

After I click the game.guess button, the first time around, I get the expected output… game.input clears and guessed is displayed. However, the second time I click the guess button with a different value, I receive the error: 

guess is not a function
|   onclick()
|   event = click clientX=77, clientY=33

guess(game.input.value)                 onclick(line 2)

And I honestly can’t figure out why. What am I doing wrong?

(I got the bulk of this code from Mastering JavaScript, Premium Edition, by James Jaworski)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is on these lines:

    guess=s[i];
result += guess;

    This way you are changing the context of guess. If you change this line to

    result += s[i];

    Your error will go away.
    You are conflicting your function with using same name for a variable.
    Remember to define your variables using var keyword and avoid such confusion.

    1 – use anonymous functions where possible

    2 – declare and use local variables

    To avoid conflicts.

    • 0