Javascript中按钮中的if/else语句不起作用[关闭]答案

【问题标题】：If/else statement in button in Javascript doesn't work [closed]Javascript中按钮中的if/else语句不起作用[关闭]
【发布时间】：2015-01-08 19:34:55
【问题描述】：

我有以下代码：

<body onload="reset()">

    <div id="menu" class="menu"></div>

    <div id="container">
        <button onclick="openMenu()">Open Menu</button>
    </div>

    <script type="text/javascript">

        function reset(){

            var flag = true;    
            document.getElementById("menu").innerHTML = flag;           

        }

        function openMenu(){

            if (flag = true) {
                var menu = document.getElementById("menu");
                menu.className = 'menu2';
                flag = false;
            }else {
                var menu = document.getElementById("menu");
                menu.className = 'menu';
                flag = true;
            };

            document.getElementById("menu").innerHTML = flag;

        }

    </script>

</body>

css 是：

#menu{
	width: 100%;
	background-color: #232323;
}

.menu{
	height: 400px;
}

.menu2{
	height: 600px;
	-webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

问题是，当我第一次按下按钮时，div 将其高度更改为 600px，就像它应该做的那样。但是我第二次按下它（此时“标志”变量为假），div 不会返回到“菜单”类，将其高度更改回 400 像素。我似乎无法找到发生这种情况的原因。

【问题讨论】：

if (flag = true) 不是比较！
if (flag = true) {
另外，你是不是凭空提取了一个名为flag 的变量？还是在其他地方初始化？
@DrewKennedy 我的错，是的，页面加载时“标志”被声明为真。

标签： javascript html css button

【解决方案1】：

if (flag = true) {

需要

if (flag == true) {

或

if (flag === true) {

或

if (flag) {

使用类似 jshint 或 jslint 的工具

【讨论】：

这也是一个错误。 :)
从技术上讲，这不是必需的，因为 ELSE 将捕获“未定义标志”条件，然后在其中设置标志变量以供后续运行。（但我同意这是一种不好的形式，我通常在我的文档顶部的某个地方设置这样的“全局”标志。）
@Teemu 我的错，页面加载时变量“flag”实际上被定义为true，我只是没有错误地将它添加到我的代码中。

【解决方案2】：

if (flag = true) {

必须是

if (flag == true) {

你应该做一个变量标志，否则你无法检查它是否为真，像这样：

var flag = true; // or false, just what you want for flag to be in the first place

【讨论】：