Javascript 将div设置回显示时出现问题：将其设置为块后无

我正在尝试学习如何使用JavaScript操作DOM，我在codecademy学习了一些绝对的基础知识，但与DOM无关。这是我第一次尝试，我在代码中的注释可能看起来有点业余，但用我自己的话来说，它们可以帮助我理解发生了什么

问题：

我试图通过按钮的id来显示/隐藏另一个div。我能够让它从

display:none

转到

display:block

，但是我想再次单击按钮并隐藏菜单，所以我尝试添加一个if/else语句，但在几次几乎随机的尝试后，我被卡住了

我在谷歌上搜索过解决方案，但我发现的代码都不像我的，我希望有人能指出我的代码中需要做什么，这样我就可以从头到尾跟着做

if（menu===style.display='none'）

在我尝试了一些不起作用的事情之后，只是一厢情愿

我知道这可以在jQuery中完成，但对我来说，现在这并不重要，因为我需要掌握一些基本的JavaScript来进步

这是我的

我的JS

如果出现以下情况，您的帐户中缺少“=”符号：

function hideShow() {
  //Specify the id I want to add the event to, here it is menubutton and I have added click and told it to look for the function menutoggle
  document.getElementById('menubutton').addEventListener("click", menutoggle, false)
    //Now for the function called menutoggle which will set the id menu to 'block' if it is currently 'none' and to 'none' if it is currently 'block'
  function menutoggle() {
    if (menu === style.display = 'none') {
      document.getElementById('menu').style.display = 'block';
    } else {
      document.getElementById('menu').style.display = 'none';
    };
  }
};
window.onload = hideShow;

应该是

if(document.getElementById('menu').style.display == 'none')

另外，不要在加载时添加eventListener。只需在html中执行即可：

<button id="menubutton" class="menubutton" onclick="hideShow()">Show Menu</button>
<menu id="menu">
  I am the menu!
</menu>

function hideShow() {
    if (document.getElementById('menu').style.display == 'none') {
      document.getElementById('menu').style.display = 'block';
    } else {
      document.getElementById('menu').style.display = 'none';
    };
}

显示菜单
我是菜单！
函数hideShow（）{
if（document.getElementById（'menu'）.style.display=='none'）{
document.getElementById（'menu'）.style.display='block'；
}否则{
document.getElementById（'menu'）.style.display='none'；
};
}

如果出现以下情况，则您的密码中缺少“=”符号：

function hideShow() {
  //Specify the id I want to add the event to, here it is menubutton and I have added click and told it to look for the function menutoggle
  document.getElementById('menubutton').addEventListener("click", menutoggle, false)
    //Now for the function called menutoggle which will set the id menu to 'block' if it is currently 'none' and to 'none' if it is currently 'block'
  function menutoggle() {
    if (menu === style.display = 'none') {
      document.getElementById('menu').style.display = 'block';
    } else {
      document.getElementById('menu').style.display = 'none';
    };
  }
};
window.onload = hideShow;

应该是

if(document.getElementById('menu').style.display == 'none')

另外，不要在加载时添加eventListener。只需在html中执行即可：

<button id="menubutton" class="menubutton" onclick="hideShow()">Show Menu</button>
<menu id="menu">
  I am the menu!
</menu>

function hideShow() {
    if (document.getElementById('menu').style.display == 'none') {
      document.getElementById('menu').style.display = 'block';
    } else {
      document.getElementById('menu').style.display = 'none';
    };
}

显示菜单
我是菜单！
函数hideShow（）{
if（document.getElementById（'menu'）.style.display=='none'）{
document.getElementById（'menu'）.style.display='block'；
}否则{
document.getElementById（'menu'）.style.display='none'；
};
}

元素.样式.显示读取内联样式..用于读取css属性（样式表或内联css）

=

/（

==

=>严格）是比较运算符，

=

是赋值运算符。使用比较运算符测试值，并使用

=

设置

值/属性

menu

在您的示例中未定义，变量

menu

应保持

HTMLElement

具有

id

作为

menu

函数隐藏（）{
var menu=document.getElementById（'menu'）；
document.getElementById（'menubutton'）。addEventListener（“单击”，菜单切换，false）
函数menutoggle（）{
if（getComputedStyle（菜单）.getPropertyValue（“显示”）==“无”）{
menu.style.display='block'；
}否则{
menu.style.display='none'；
};
}
};
window.onload=隐藏显示
.menubutton{
显示：块；
利润率：10px；
}
菜单{
背景颜色：蓝色；
颜色：白色；
宽度：100px；
利润率：10px；
填充：10px；
显示：无；
}
显示菜单
我是菜单！
元素.样式.显示

读取内联样式..用于读取css属性（样式表或内联css）

=

/（

==

=>严格）是比较运算符，

=

是赋值运算符。使用比较运算符测试值，并使用

=

设置

值/属性

menu

在您的示例中未定义，变量

menu

应保持

HTMLElement

具有

id

作为

menu

函数隐藏（）{
var menu=document.getElementById（'menu'）；
document.getElementById（'menubutton'）。addEventListener（“单击”，菜单切换，false）
函数menutoggle（）{
if（getComputedStyle（菜单）.getPropertyValue（“显示”）==“无”）{
menu.style.display='block'；
}否则{
menu.style.display='none'；
};
}
};
window.onload=隐藏显示
.menubutton{
显示：块；
利润率：10px；
}
菜单{
背景颜色：蓝色；
颜色：白色；
宽度：100px；
利润率：10px；
填充：10px；
显示：无；
}
显示菜单
我是菜单！
如果（menu===style.display='none'）此
似乎不是有效的表达式。您试图在此处执行什么操作？如果（menu===style.display='none'）
似乎不是有效的表达式，则执行此
。你想在这里做什么？另请参见：@RayonDabre很棒，这稍微改变并清理了我的代码，但我仍然能够理解它，如果我正确编写了if语句，它的功能也会比我的原始版本好得多。我的需要2次点击才能显示菜单：@RayonDabre很好，这稍微改变了我的代码并清理了一下，但我仍然能够理解它，如果我正确编写了if语句，它的功能也比我的原始版本要好得多。我的需要2次点击才能显示菜单，实际上使用事件侦听器是在html属性中内联编码的首选方法-将您的代码与视图分开。这就是我一直在用代码验证的内容，谢谢。我现在明白我的错误了。尽管关于eventListener，我读过，将onclick=“”添加到HTML中是一种不好的做法，并且您应该将js排除在HTML之外。实际上，使用框架（如jQuery）是首选方法，但在您专注于功能的同时，让它来处理所有的垃圾内容。：）当然，这是首选的方式。但是我发现有些人被window.onload搞得神魂颠倒，然后得到加载缓慢的页面，然后抱怨它。如果你的
onload
导致页面加载缓慢，那么你就做错了@GoldenGonaz坚持你正在做的事情——不要陷入在属性中使用代码的境地，因为在这些属性中，所有东西都需要是全局的和所有其他可怕的东西