Question

我是新手，这是我的第一个if和else声明。

我试图让用户根据他或她在页面上看到的声音输入动物名称。通过数组刷新时会生成新的声音。（这部分工作正常）

我面临的问题：

如果我添加了checkGuess功能，则我的makeSound功能无效。
我的if和else条件是错误的还是我的逻辑？我想比较用户输入的数组，然后相应地显示警报。

会感激一些指导。

＆＃13;

<script>
    function start() {
        makeSound();
    }

    window.onload = start;

    function makeSound() {
        // Used Variable to define an Array for storing different sounds 
        var sounds = ["moo", "woof"];

        // Used the Math function in JS to create a random sound and assign new variable 
        var rand1 = Math.floor(Math.random() * sounds.length);

        // below var is defined to hold the sound
        var soundDisplay = sounds[rand1];

        // display logic
        var soundElement = document.getElementById("soundDisplay");
        soundElement.innerHTML = soundDisplay;
    }

    function checkGuess() {
        var button = document.getElementById("butAnimal");
        var usrInput = document.getElementById("guess").value;

        //Get the value of the input field with id="guess"
        if (usrInput == "Cow" && sounds[0]) {
            alert("Congratulations you got the sound right.");
        } else if (usrInput == "Dog" && sounds[1]) {
            alert("Congratulations you got the sound right.");
        }
    }

    //console.log("here");
</script>

＆＃13;

<html>
    <head></head>
    <body>
        </br></br>
        The user has to enter the name of the animal based on the sounds like woof and moo which are inside an array.</br>
        </br></br>

        <form>
            What animal says <span id="soundDisplay"></span> 
            <input type="text" id="guess" name="guess">
            <input type="button" onclick="checkGuess()" id="butAnimal" name="butAnimal" value="Submit">
        </form>
        <p id="result"></p>
    </body>
</html>

＆＃13;

Answer 1

由于sounds是makeSound函数的范围（或私有）变量而引发错误。

将其移出功能，它将起作用。这是一个演示：http://jsfiddle.net/akx19Loq/

的小提琴

关于变量范围的更多信息（来自MDN）

当您在任何函数之外声明变量时，它被称为全局变量，因为它可用于当前文档中的任何其他代码。在函数中声明变量时，它被称为局部变量，因为它仅在该函数中可用。

修改

Hi Vipul，

当然，我很乐意解释！让我们分解我们checkGuess逻辑中发生的事情。

我们获取用户的输入并将其存储为变量usrInput。

var usrInput = document.getElementById("guess").value;

然后我们检查usrInput变量是否匹配＆＃34; Cow＆＃34;或＆＃34;狗＆＃34;。还可以对sounds[0]或sounds[1]进行额外检查。这些都是必需的，因为动物必须与声音联系在一起（一只母牛只能＆＃34; moo＆＃34;，一只狗只能＆＃34; woof＆＃34;）。

if (usrInput == "Cow" && sounds[0]) { // Handle correct guess }

但是，检查&& sounds[0]（＆＃34; moo＆＃34;）存在问题，将始终评估为true（由于JavaScript评估booleans的方式 - 即{ {1}}，0，false和null都是undefined，但是false/falsey，1，true，或"yes"为[] - 您似乎从true/truthy和==的评论中了解到这一点。

所以，如果这个问题是＆＃34;什么动物说什么＆＃34;，你猜测＆＃34;牛＆＃34;，你会赢，因为===肯定等于{{1} }，usrInput（或woof）总是Cow。所以我们需要添加一个额外的检查。这就是我们添加的原因：

sounds[0]

动物声音由true确定。但是，我们不会将声音存储在var sound = document.getElementById("soundDisplay").textContent函数可访问的位置（这与JavaScript中的＃34;范围＆＃34;相关），我们需要获取来自makeSound元素的声音（使用textContent - 我本可以使用innerHTML，但textContent在这里更有意义......）

现在我们有了声音，我们可以正确地检查问题＆＃34;什么动物说的低音＆＃34;。当用户猜到＆＃34; Cow＆＃34;时，checkGuess仍然是真的，但span将评估为假，因为＆＃34; moo＆＃34;不等于＆＃34; woof＆＃34;。

希望这可以解释为什么usrInput == "Cow"和sounds[0] == sound语句中需要进行两项检查。至于为什么三个（if），你肯定是正确的 - 这里没有涉及类型，但else被认为是编写JavaScript时要遵循的好习惯（与数组无关，只是JavaScript的真实/虚假方面）。

至于发展你的答案 - 你把它钉在头上！实践绝对是关键！我建议你继续阅读你的书，并注意以下书籍：http://eloquentjavascript.net/（免费在线阅读，以书本形式提供 - 作为新手入门的好书）和面向网络开发者的专业JavaScript（通过Zakas）。此外，Crockford＆＃34; JavaScript，The Good Parts＆＃34;始终是推荐的资源（就个人而言，直到本书我才从===切换到===进行所有比较，而不仅仅是在我需要进行值和类型检查时。）

另外，请务必了解==的工作原理！请查看：https://developer.chrome.com/devtools/docs/console以了解有关此内容的更多信息。控制台以及阅读Eloquent JavaScript将允许您在阅读时参与。

另一个提示 - 继续参与StackOverflow！在您学习时，请使用stackoverflow作为资源。阅读其他人的问题并尝试回答（即使您没有提交答案）。如果您无法找到解决方案，请查看其他人的操作，并尝试了解其答案的工作原理。忽略＆＃34;游戏化＆＃34; stackoverflow的一个方面（接受答案总是很好，但是从经验丰富的开发人员那里学习对开发人员来说更有利！）

最后，针对您热衷的事情开展个人项目！您的热情将激发您继续学习该技术的愿望。

BTW，这是你的游戏逻辑的重构版本，带有评论：

http://jsfiddle.net/qadnyt6d/

===

祝你好运Vipul！
顺便说一句，这对你来说是一个挑战 - 你能不能使用new version并重构代码，以便在用户获胜后开始新游戏？

我的if和else中的问题是2个函数的逻辑和冲突

1 个答案: