简单HTML Javascript按钮onclick函数不工作

所以本质上我想让它尽可能简单，这意味着没有jquery或bootstrap等。。。只是简单的javascript、HTML和CSS。这就是我目前所拥有的

脚本：

var menuOptions= document.getElementsByClassName("nav");

var hamburger= document.getElementById("nav-btn");

  function myFunction() {

hamburger.onclick= menuOptions.style.visibility= 'visible';

}

HTML:

除了给我一个解决方案，如果你能解释为什么我目前的方法不起作用，为什么你的方法起作用，我将不胜感激。提前谢谢

两个问题：

getElementsByClassName（）

返回一个列表，而不是单个元素（尽管该列表可能只包含单个元素），并且该列表没有

.style

属性。您可以使用

菜单选项[0]

访问列表中的第一个（在本例中仅此）元素

您不想在函数中说

hamburger.onclick=

，因为这将分配一个新的

onclick

处理程序，但是您的函数已经从按钮的

onclick

属性被调用了。（另外，如果您试图分配一个新的单击处理程序，您需要

hamburger.onclick=function（）{/*something*/}

）

因此，要使现有代码正常工作，对其进行的最小更改是更改以下行：

hamburger.onclick= menuOptions.style.visibility= 'visible';

……为此：

menuOptions[0].style.visibility = 'visible';

在这方面：

var menuOptions=document.getElementsByClassName（“nav”）；
var hamburger=document.getElementById（“nav btn”）；
函数myFunction（）{
菜单选项[0]。style.visibility='visible'；
}

.nav{
可见性：隐藏；
}

当前设置不起作用的原因有几个：

• Document#getElementsByClassName

  返回一个集合，并将结果视为DOM元素。您需要访问像

  [0]

  这样的索引才能获得实际的元素

• 您的切换按钮只能以一种方式工作，因为再次单击时，

  visibility

  被设置为

  visible

  ，但不会返回到

  none

• 在

  myFunction

  中，不应将

  hamburger.onclick

  指定给您选择的表达式。我不知道您为什么尝试分配另一个单击处理程序，但为了使其正常工作，您需要将其设置为

  函数（）{…}

现在听我的建议：

• 使用CSS类来控制菜单是否隐藏，而不是在JS中乱搞

  样式

  属性。当运行

  myFunction

  时，您可以使用DOM元素的

  classList

  属性来

  .add（）

  、

  .remove（）

  和

  .toggle（）

  特定类。我选择使用

  切换

  ，因为我认为这最适合您的用例

• 使用

  element.addEventListener

  而不是像

  onclick

  这样的HTML属性

片段：

var menuOptions=document.getElementsByClassName（“nav”）[0]
var hamburger=document.getElementById（“导航btn”）
hamburger.parentNode.addEventListener（'click'，function myFunction（））{
menuOptions.classList.toggle（'隐藏'）
})

.nav.hidden{
可见性：隐藏；
}

你需要汉堡干什么？在我建立一个可变汉堡之前，但最近意识到我不需要。。。但我似乎无法在我的HTML“UncaughtReferenceError:myFunction未在HtmlButtoneElement.onclick中定义”中消除这个错误。你知道为什么吗？好的，非常感谢你的快速回复！！！我理解推理2，但不完全理解推理1（仍不确定[0]的作用）。然而，当我更改javascript代码时，我得到了一个错误“UncaughtReferenceError:myFunction未在HtmlButtoneElement.onclick中定义”这是指HTML，你知道为什么吗？如何在页面中包含javascript？方括号用于访问列表或数组的元素。0是因为元素索引从零开始，所以

[0]

是第一个元素，

[1]

是第二个元素（如果有第二个），等等。您不必对其他变量执行此操作，因为

getElementById（）

只返回一个元素，而不是列表。您的意思是如何包含Javascript？如果这让人沮丧，我使用“我提前道歉”，我现在才编写了两个月。我的意思是，您的问题没有提到或显示脚本是内联的，还是来自外部脚本，或者

元素与其他元素的关系。无论如何，如果根据您的评论，它在

中，并且文件实际存在并已加载（是否在浏览器的“开发工具”的“网络”选项卡中显示为已加载），并且代码如图所示，那么我无法解释为什么它不起作用。（您可以在小片段中看到我的代码确实有效…）谢谢您的回复！我仍然有问题，因为不幸的是我得到了这个错误“uncaughtreferenceerror:myFunction没有在HTMLButtonElement.onclick定义”你知道为什么会这样吗？（它指的是HTML）尝试使用

addEventListener

，正如我在上面更新的代码片段中所示。希望有帮助！如果没有，请告诉我；发布您的完整代码，我可以查看一下以诊断错误。我非常感谢尝试帮助我，但我似乎得到了相同的错误。我愿意将我所有的代码发送给你（比所给的多得多）。。。有什么我可以私下给你的吗？事实上，只要创建一个JSFIDLE或Codepen并以这种方式将链接发送给我。这可能是最简单的。演示对我来说很有用；我删除了一个错误的斜杠，它过早地关闭了一个

div

元素。我认为错误是由于没有删除

onclick

hamburger.onclick= menuOptions.style.visibility= 'visible';

menuOptions[0].style.visibility = 'visible';