为什么切换功能无法按预期工作？答案

【问题标题】：Why does the toggle function not work as expected?为什么切换功能无法按预期工作？
【发布时间】：2013-04-16 12:35:35
【问题描述】：

我对 javascript 很陌生，我从编写一个小脚本的简单任务开始。我期望通过单击切换按钮来显示字符串...

<!DOCTYPE html>
<html>
<body>


<button onclick="foo()">Foo</button>
<button onclick="toggle()">Toogle</button>
<p id="demo"></p>


<script>
     var toggle = false;//set the desired initial value to toggle flag
     var x = "";

     function toggle() {
         alert("ENTERED Toggle");
         toggle = !toggle;
         x= toggle? "Toggle set to true. " : "";
     }

     function foo() {`enter code here`
         alert("ENTERED Foo");
         var y = "Food pressed";
         y = x + y;
        document.getElementById("demo").innerHTML=y; // display the x value
     }
</script>

</body>
</html>

预期：当只点击 foo 时，会显示警报框并点击“确定”，只是简单的“Foo 被按下”。应显示。当单击一次切换然后单击 foo 时，将显示“切换设置为 true。Foo 已按下”{两个警报出现在此过程中}，然后再次第二次按下切换并按下 foo，切换标志为切换并且只有“Foo press”。显示出来，然后就这样......

实际结果：只有 foo click 有效，toggle click 根本无效。

有人能解释一下吗？

【问题讨论】：

你问浏览器的调试器了吗？ - F12 用于 IE，Ctrl-Shift-I 用于 FF、Chrome 和 Opera。
请学习how to debug JavaScript。

标签： javascript

【解决方案1】：

你的名字有冲突。 toggle 函数替换了 toggle 变量。这是因为在 ECMAScript (Javascript) 中，可以通过不添加括号来传递函数，也就是说函数是 first-class citizen。

一个例子：

x = alert; //"x" is now the same function as "alert"
x("Hej");

因此，您对toggle 函数的定义等同于这个赋值：

var toggle = function() {
  alert("ENTERED Toggle");
  toggle = !toggle;
  x= toggle? "Toggle set to true. " : "";
}

解决方案是为函数或变量指定另一个名称。

【讨论】：

维克斯特罗姆：非常感谢。现在可以了。我不知道我不能拥有同名的函数和变量...