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

我是新手，这是我的第一个

if

和

else

语句

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

我面临的问题是：

如果我添加了我的

checkGuess

函数，那么我的

makeSound

函数不起作用

我的

if

和

else

条件错误还是我的逻辑错误？我想将用户输入的内容与数组进行比较，然后相应地显示警报

希望您能提供一些指导

函数start（）{
makeSound（）；
}
window.onload=开始；
函数makeSound（）{
//使用变量定义用于存储不同声音的数组
变音=[“呜”，“呜”]；
//使用JS中的数学函数创建随机声音并指定新变量
var rand1=Math.floor（Math.random（）*sounds.length）；
//下面的变量定义为保持声音
var soundDisplay=声音[rand1]；
//显示逻辑
var soundElement=document.getElementById（“soundDisplay”）；
soundElement.innerHTML=声音显示；
}
函数checkGuess（）{
var button=document.getElementById（“butAnimal”）；
var usrInput=document.getElementById（“猜测”）.value；
//使用id=“guess”获取输入字段的值
如果（usrInput==“Cow”&&sounds[0]）{
警惕（“恭喜你把声音弄对了。”）；
}else if（usrInput==“Dog”&&sounds[1]）{
警惕（“恭喜你把声音弄对了。”）；
}
}
//console.log（“此处”）；

用户必须根据数组中类似于woof和moo的声音输入动物的名称




动物说什么

由于

sounds

是

makeSound

函数的作用域（或私有）变量，因此引发错误

将其移出功能，它就会工作。这里有一把小提琴在演示：

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

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

编辑

嗨Vipul

当然，我很乐意解释！让我们分析一下我们的

checkGuess

逻辑中发生了什么

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

usrInput

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

然后检查

usrInput

变量是否匹配“Cow”或“Dog”。另外还有一个检查

声音[0]

或

声音[1]

。这些是必需的，因为动物必须和声音联系在一起（牛只能“咕噜”，狗只能“呜呜”）

但是，检查

&&sounds[0]

（即“moo”）时存在一个问题，它将始终计算true（由于JavaScript如何计算布尔值），也就是说，

0

，

false

，

null

，以及

未定义的
都是
false/false
，但是
1
，
true
，
，
“yes”
或
[]
是
true/truthy
——您似乎从有关
=
和
=
的评论中理解了这一点

所以，如果问题是“动物说汪汪什么”，你猜“奶牛”，你会赢，因为
usrInput
肯定等于
Cow
，而且
声音[0]
（或汪汪声）总是
真的。所以我们需要增加一张支票。这就是为什么我们加上：

var sound = document.getElementById("soundDisplay").textContent

动物声音由
makeSound
确定。但是，我们没有将声音存储在
checkGuess
函数可以访问的地方（这与JavaScript中的“范围”有关），我们需要从
span
元素中获取声音的值（使用textContent-我可以使用innerHTML，但是textContent在这里更有意义…）

既然我们有了声音，我们就可以正确地检查“动物说呜呜”这个问题了。当用户猜测“Cow”时，
usrInput==“Cow”
仍将为真，但
sounds[0]==sound
将计算为假，因为“moo”不等于“woof”

希望这能解释为什么在
if
和
else
语句中都需要检查。至于为什么有三个（
==
），您肯定是正确的-这里不涉及类型，但是
==
被认为是编写JavaScript时要遵循的良好实践（与数组无关，只是JavaScript的真实/虚假方面）

至于发展你的答案-你把它钉在了头上！练习绝对是关键！我建议你继续阅读你的书，并注意以下几本书：（免费在线阅读，以书的形式提供-作为一个新手开始的好书）和面向Web开发人员的专业JavaScript（由Zakas编写）。此外，Crockford的“JavaScript，好的部分”一直是推荐的资源（就个人而言，直到这本书，我才从
=
切换到
==
进行所有比较，而不仅仅是在我需要进行值和类型检查时）

另外，请务必了解
控制台的工作原理！查看：了解更多关于此的信息。控制台，以及阅读有说服力的JavaScript，将允许您在阅读时参与

另一个提示-继续参与StackOverflow！在学习过程中，请将stackoverflow用作资源。阅读其他人的问题并尝试回答他们（即使你没有回答）
var sound = document.getElementById("soundDisplay").textContent

/* The following randomly selects an animal and returns animal object,
   assigning to the variable "selectedAnimal"

   Note the paranthesis around the function and at the end,
   or (function(){})();

   This is an immediately invoked function expression, or IIFE.

   As you continue to learn, you will soon see how powerful this is!
   http://stackoverflow.com/questions/6340874/a-javascript-function
*/

var selectedAnimal = (function() {

    // Array of animals
    var animals = [
        {
            name: 'dog', says: 'woof'
        },
        {
            name: 'cow', says: 'moo'
        },
        {
            name: 'cat', says: 'meow'
        }
    ];

    // Return randomly selected animal
    return animals[Math.floor(Math.random() * animals.length)];
})();

// Event handler bound to button
function checkUserInput() {

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

    // We construct a new Regular Expression to test.
    // The 'i' denotes case-insensitive, so 'Cat' and 'CAT'
    // and 'cat' are all matched

    var regex = new RegExp(selectedAnimal.name, 'i');

    if (regex.test(usrInput)) {
        alert('Congrats! You guessed the right animal!');   
    } else {
        alert('Sorry, that is not correct!');   
    }

}

// Bind window onload event listener, updates span in HTML with correct animal name
window.onload = function() {

    // Display in DOM
    document.getElementById("soundDisplay").innerHTML = selectedAnimal.name;

}