简单 HTML Javascript 按钮 onclick 功能不起作用

Question

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

Javascript:

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

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

  function myFunction() {

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

}

HTML:

<HTML>
  <button onclick="myFunction()">  
    <span id="nav-btn">
      <image src="Menugreen.png" alt="collapsable menu"/>  
    </span>
  </button>  
<div class="nav">
  <ul>
    <li id="Programs"> <a href="Programs.html"> Programs </a> </li>
    <li> <a href="Tshirts.html"> T-Shirts </a> </li>
    <li id="About"> <a href="About.html"> About </a> </li>
  </ul>
</div>
</HTML>

CSS:

.nav {
  visibility: hidden;
}

除了给我一个解决方案之外，如果您能解释为什么我当前的方法不起作用以及为什么您的方法起作用，我将不胜感激。提前致谢！

Answer 1

两个问题：

getElementsByClassName() returns 一个列表，而不是单个元素（尽管列表可能只包含一个元素），并且该列表没有 .style 属性。您可以使用 menuOptions[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");

function myFunction() {
  menuOptions[0].style.visibility = 'visible';
}

.nav {
  visibility: hidden;
}

<HTML>
  <button onclick="myFunction()">  
    <span id="nav-btn">
      <image src="Menugreen.png" alt="collapsable menu"/>  
    </span>
  </button>  
<div class="nav">
  <ul>
    <li id="Programs"> <a href="Programs.html"> Programs </a> </li>
    <li> <a href="Tshirts.html"> T-Shirts </a> </li>
    <li id="About"> <a href="About.html"> About </a> </li>
  </ul>
</div>
</HTML>

如果你想重复点击按钮来打开和关闭菜单显示，那么你可以测试当前的可见性：

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

展开以下内容以查看是否有效：

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

function myFunction() {
  menuOptions[0].style.visibility =
    menuOptions[0].style.visibility === 'visible' ? '' : 'visible';
}

.nav {
  visibility: hidden;
}

<HTML>
  <button onclick="myFunction()">  
    <span id="nav-btn">
      <image src="Menugreen.png" alt="collapsable menu"/>  
    </span>
  </button>  
<div class="nav">
  <ul>
    <li id="Programs"> <a href="Programs.html"> Programs </a> </li>
    <li> <a href="Tshirts.html"> T-Shirts </a> </li>
    <li id="About"> <a href="About.html"> About </a> </li>
  </ul>
</div>
</HTML>

Answer 2

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

Document#getElementsByClassName returns 一个集合，您将结果视为 DOM 元素。您需要访问像 [0] 这样的索引才能获取实际元素。
您的切换按钮只能以一种方式工作，因为 visibility 设置为 visible 但再次单击时不会设置回 none。
在 myFunction 中，不应将 hamburger.onclick 分配给您选择的表达式。我不确定您为什么要尝试分配另一个点击处理程序，但为了完成这项工作，您需要将其设置为 function () { ... }.

现在听取我的建议：

使用CSSclasses来控制菜单是否隐藏，而不是乱用style属性 JS。您可以使用 classList 属性 of DOM 元素到 .add()、.remove() 和 .toggle() 一个特定的 class 当 myFunction 是运行。我选择使用 toggle 是因为我认为它最适合您的用例。
使用 element.addEventListener 而不是 HTML 属性，例如 onclick.

片段：

var menuOptions = document.getElementsByClassName("nav")[0]

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

hamburger.parentNode.addEventListener('click', function myFunction() {
  menuOptions.classList.toggle('hidden')
})

.nav.hidden {
  visibility: hidden;
}

<button>  
    <span id="nav-btn">
      <img src="Menugreen.png" alt="collapsable menu"/>  
    </span>
  </button>
<div class="nav hidden">
  <ul>
    <li id="Programs"> <a href="Programs.html"> Programs </a> </li>
    <li> <a href="Tshirts.html"> T-Shirts </a> </li>
    <li id="About"> <a href="About.html"> About </a> </li>
  </ul>
</div>

简单 HTML Javascript 按钮 onclick 功能不起作用

Simple HTML Javascript button onclick function not working

html

javascript

onclick

buttonclick

drop-down-menu

片段：