Question

所以我遇到以下代码段的问题：

<!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>

点击game.guess按钮后，第一次，我得到预期的输出... game.input清除并猜测显示。但是，第二次单击具有不同值的guess按钮时，我收到错误：

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

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

老实说，我无法弄明白为什么。我做错了什么？

谢谢。

（我从James Jaworski的Mastering JavaScript，Premium Edition获得了大部分代码）

Answer 1

问题在于以下几点：

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

这样您就可以更改guess的上下文。如果您将此行更改为

result += s[i];

你的错误会消失。您的功能与使用变量的相同名称相冲突。请务必使用var关键字定义变量，避免这种混淆。

1 - 尽可能使用匿名函数

2 - 声明并使用局部变量

避免冲突。

Answer 2

在您的函数displayGuessed()中，您将变量guess（这是一个函数）设置为猜到的字母。

您可以使用“var”关键字定义函数的guess变量（使其与函数不同）来解决此问题：

function displayGuessed(s) 
{
    var guess;
    result="";

    for(i in s)
    {
        guess=s[i];
        result += guess;
    }
    document.game.guessed.value=result;
}

提示：我通过使用Firefox的Firebug插件轻松地发现了这个bug，它允许您逐行浏览javascript代码，以查看出现问题的地方。

javascript函数停止被识别

2 个答案: