为什么我的JavaScript函数无法运行？

debugcn 发表于 Dev

西安娜·西迪（Sianna Zewdie）

我正在建立一个网页。在我的菜单页面上，我尝试创建一个功能，当我单击素食选项时，主要选项消失，然后出现素食选项。但是，这需要使用javascript，因此我对javascript很陌生。我创建了一个名为showveg（）的函数（如下），但是为我的按钮创建了一个onclick函数，但没有任何反应。这是我的代码。

// function displayhidden(class){
//  document.getElementByClass("menumain").style.display = "hidden";
// }
function showveg() {
  document.getElementByClass("menumain").style.visibility = "hidden";
  document.getElementByClass("price").style.visibility = "hidden";
  document.getElementByClass("dishtitle").style.visibility = "hidden";
  document.getElementByClass("dishinfo").style.visibility = "hidden";
  document.getElementByClass("key").style.visibility = "hidden";
  document.getElementByClass("doro").style.visibility = "hidden";
  document.getElementByClass("yebeg").style.visibility = "hidden";
  document.getElementByClass("kitfo").style.visibility = "hidden";
  document.getElementByClass("beeftibs").style.visibility = "hidden";
  document.getElementByClass("lambtibs").style.visibility = "hidden";

  document.getElementByClass("menuveg").style.visibility = "visible";
  document.getElementByClass("price2").style.visibility = "visible";
  document.getElementByClass("dishtitle2").style.visibility = "visible";
  document.getElementByClass("dishinfo2").style.visibility = "visible";
  document.getElementByClass("key2").style.visibility = "visible";
  document.getElementByClass("doro2").style.visibility = "visible";
  document.getElementByClass("yebeg2").style.visibility = "visible";
  document.getElementByClass("kitfo2").style.visibility = "visible";
  document.getElementByClass("beeftibs2").style.visibility = "visible";
  document.getElementByClass("lambtibs2").style.visibility = "visible";

}

/* Start Variables */

:root {
  --aa-color: #57C324;
}


/* End Variables */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
}


/* Start Navbar */

.navbar-wrapper {
  // background: blue;
  padding: 20px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 5px 10px 8px #888888;
  z-index: 100;
  position: relative;
}

.leftside {
  // background: green;
  width: 50%;
  height: 10px;
}

.rightside {
  width: 50%;
  // background: red;
}

.options {
  // background: yellow;
  text-decoration: none;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.linkhome {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkmenu {
  font-size: 120%;
  text-decoration: none;
  color: var(--aa-color);
  ;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkabout {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkfood {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkculture {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkmenu:hover {
  color: var(--aa-color);
}

.linkabout:hover {
  color: var(--aa-color);
}

.linkfood:hover {
  color: var(--aa-color);
}

.linkculture:hover {
  color: var(--aa-color);
}


/* End Navbar */


/* Start Main */

.injera-menu {
  background-size: cover;
  overflow: hidden;
  width: 100%;
  height: 10%;
  display: block;
}

.ourmenutext {
  position: absolute;
  margin-top: -25%;
  font-size: 400%;
  background: -webkit-linear-gradient(#10CB00, #10CB00, #FFC701, #FF0101, #FF0101);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 3px white;
  -webkit-text-stroke: 3px black;
  margin-left: 3%;
}

.menuoptions {
  display: flex;
  width: 100%;
  justify-content: center;
}

.mainoption {
  margin: 2% 5%;
  color: var(--aa-color);
}

.vegoption {
  margin: 2% 5%;
}

.specialoption {
  margin: 2% 5%;
}

.drinksoption {
  margin: 2% 5%;
}

.vegoption:hover {
  color: var(--aa-color)
}

.specialoption:hover {
  color: var(--aa-color)
}

.drinksoption:hover {
  color: var(--aa-color)
}


/* Start Menu */

.menu {
  position: relative;
}


/* Start Main Menu */

.menumain {
  justify-content: center;
  color: var(--aa-color)
}

.price {
  float: right;
  border: 1px solid var(--aa-color);
  padding: 1% 2%;
}

.dishtitle {
  margin-left: 40%;
  text-decoration: underline;
}

.dishinfo {
  padding: 5% 10%;
  font-size: 150%;
}

.key {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
}

.doro {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
}

.yebeg {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
}

.kitfo {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
}

.beeftibs {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
}

.lambtibs {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
}


/* End Main Menu */


/* Start Vegetarian Menu */

.menuveg {
  justify-content: center;
  color: var(--aa-color);
  visibility: hidden;
}

.price2 {
  float: right;
  border: 1px solid var(--aa-color);
  padding: 1% 2%;
  visibility: hidden;
}

.dishtitle2 {
  margin-left: 40%;
  text-decoration: underline;
  visibility: hidden;
}

.dishinfo2 {
  padding: 5% 10%;
  font-size: 150%;
  visibility: hidden;
}

.key2 {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
  visibility: hidden;
}

.doro2 {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
  visibility: hidden;
}

.yebeg2 {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
  visibility: hidden;
}

.kitfo2 {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
  visibility: hidden;
}

.beeftibs2 {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
  visibility: hidden;
}

.lambtibs2 {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
  visibility: hidden;
}


/* End Vegetarian Menu */


/* End Menu */


/* End Main */

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Addis Abeba | Menu</title>
  <link rel="stylesheet" href="/css/menu.css">
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
</head>

<body>
  <!-- Start Navbar -->
  <nav>
    <div class="navbar-wrapper">
      <div class="leftside">

      </div>
      <div class="rightside">
        <div class="options">
          <a href="#" class="linkhome">Home</a>
          <a href="menu.html" class="linkmenu">Menu</a>
          <a href="#" class="linkabout">About Us</a>
          <a href="#" class="linkfood">Our Food</a>
          <a href="#" class="linkculture">Ethiopian Culture</a>
        </div>
      </div>
    </div>
  </nav>
  <!-- End Navbar -->

  <!-- Start Main -->
  <div class="our-menu">
    <div class="ourmenusection">
      <div class="img1">
        <img src="img/injera.png" alt="injera" class="injera-menu">
      </div>
      <div class="text-ourmenu">
        <h1 class="ourmenutext">

          Menu</h1>
      </div>
    </div>
  </div>

  <div class="menuoptions">
    <h2 class="mainoption">Main</h2>
    <button type="button" class="vegbut" name="button" onclick="showveg()"><h2 class="vegoption">Vegetarian</h2></button>
    <button onclick="showveg()">Click me</button>
    <h2 class="specialoption">Special</h2>
    <h2 class="drinksoption">Drinks</h2>
  </div>

  <div class="menu">

    <!-- Start Main Menu -->
    <div class="menumain">
      <div class="key">
        <div class="price">
          <p>CHF 21.-</p>
        </div>
        <div class="dishtitle">
          <h1>Key Wat</h1>
        </div>
        <div class="dishinfo">
          Tender morsels of meat prepared in specially spiced butter, seasoned with onions and green peppers, sprinkled with garlic and ginger.
        </div>
      </div>

      <div class="doro">
        <div class="price">
          <p>CHF 23.-</p>
        </div>
        <div class="dishtitle">
          <h1>Doro Wat</h1>
        </div>
        <div class="dishinfo">
          Chicken cooked in specially seasoned red sauce and Ethiopian butter.
        </div>
      </div>

      <div class="yebeg">
        <div class="price">
          <p>CHF 23.-</p>
        </div>
        <div class="dishtitle">
          <h1>Yebeg Wat</h1>
        </div>
        <div class="dishinfo">
          Morsels of lamb prepared in special herb butter, seasoned with onions and green peppers and sprinkled with garlic and ginger.
        </div>
      </div>

      <div class="kitfo">
        <div class="price">
          <p>CHF 25.-</p>
        </div>
        <div class="dishtitle">
          <h1>Kitfo</h1>
        </div>
        <div class="dishinfo">
          Steak tartare, Ethiopian style, seasoned with special hot red pepper and spiced butter
        </div>
      </div>

      <div class="beeftibs">
        <div class="price">
          <p>CHF 24.-</p>
        </div>
        <div class="dishtitle">
          <h1>Beef Tibs</h1>
        </div>
        <div class="dishinfo">
          Strips of beef sauteed with onion and pepper.
        </div>
      </div>

      <div class="lambtibs">
        <div class="price">
          <p>CHF 24.-</p>
        </div>
        <div class="dishtitle">
          <h1>Lamb Tibs</h1>
        </div>
        <div class="dishinfo">
          Cubes of lamb fried in buter, onions, green and black peppers.
        </div>
      </div>
    </div>

    <!-- Start Vegetarian Menu -->

    <div class="menuveg">
      <div class="key2">
        <div class="price2">
          <p>CHF 21.-</p>
        </div>
        <div class="dishtitle2">
          <h1>Shiro</h1>
        </div>
        <div class="dishinfo2">
          Tender morsels of meat prepared in specially spiced butter, seasoned with onions and green peppers, sprinkled with garlic and ginger.
        </div>
      </div>

      <div class="doro2">
        <div class="price2">
          <p>CHF 23.-</p>
        </div>
        <div class="dishtitle2">
          <h1>Doro Wat</h1>
        </div>
        <div class="dishinfo2">
          Chicken cooked in specially seasoned red sauce and Ethiopian butter.
        </div>
      </div>

      <div class="yebeg2">
        <div class="price2">
          <p>CHF 23.-</p>
        </div>
        <div class="dishtitle2">
          <h1>Yebeg Wat</h1>
        </div>
        <div class="dishinfo2">
          Morsels of lamb prepared in special herb butter, seasoned with onions and green peppers and sprinkled with garlic and ginger.
        </div>
      </div>

      <div class="kitfo2">
        <div class="price2">
          <p>CHF 25.-</p>
        </div>
        <div class="dishtitle2">
          <h1>Kitfo</h1>
        </div>
        <div class="dishinfo2">
          Steak tartare, Ethiopian style, seasoned with special hot red pepper and spiced butter
        </div>
      </div>

      <div class="beeftibs2">
        <div class="price2">
          <p>CHF 24.-</p>
        </div>
        <div class="dishtitle2">
          <h1>Beef Tibs</h1>
        </div>
        <div class="dishinfo2">
          Strips of beef sauteed with onion and pepper.
        </div>
      </div>

      <div class="lambtibs2">
        <div class="price2">
          <p>CHF 24.-</p>
        </div>
        <div class="dishtitle2">
          <h1>Lamb Tibs</h1>
        </div>
        <div class="dishinfo2">
          Cubes of lamb fried in buter, onions, green and black peppers.
        </div>
      </div>
    </div>
  </div>

  <!-- End Main -->
</body>

</html>

任何帮助是极大的赞赏。谢谢！

奥姆里·阿提亚

所以您在这里做了几件不好的事情，我建议您改变一下：

您所使用的document.getElementsByClass("menumain")不存在！正确的使用方法是document.getElementsByClassName("menumain")[0]。[0]因为getElementsByClassName返回HTML集合对象（对它的访问就像对数组的访问），所以您正在使用，并且由于类只有1个元素menumain，因此该元素将是数组中的第一项（索引0）。
由于每个菜单项实际上具有相同的样式，因此不需要每个菜单项都有单独的类-它只会使您的代码混乱，冗长且令人讨厌。因此，在下面的代码段中，我将每个菜单项都切换为menu-itemclass并从CSS中删除了不再需要的内容。
为了使元素在不可见时不发生，请使用style.display = "none"代替style.visibility = "hidden"。如果您不这样做，那么那里将没有任何空白（因为元素存在于页面上但被隐藏了）。
为了隐藏整个菜单，您不需要隐藏菜单中的每个元素。您只需要隐藏所有这些元素的父级（在本例中为menuveg）。

以下是我在此处编写的所有内容的摘要：

function showveg() {
  document.getElementsByClassName("menumain")[0].style.display = "none";
  document.getElementsByClassName("menuveg")[0].style.display = "inline-block";
}

/* Start Variables */

:root {
  --aa-color: #57C324;
}


/* End Variables */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
}


/* Start Navbar */

.navbar-wrapper {
  // background: blue;
  padding: 20px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 5px 10px 8px #888888;
  z-index: 100;
  position: relative;
}

.leftside {
  // background: green;
  width: 50%;
  height: 10px;
}

.rightside {
  width: 50%;
  // background: red;
}

.options {
  // background: yellow;
  text-decoration: none;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.linkhome {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkmenu {
  font-size: 120%;
  text-decoration: none;
  color: var(--aa-color);
  ;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkabout {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkfood {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkculture {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkmenu:hover {
  color: var(--aa-color);
}

.linkabout:hover {
  color: var(--aa-color);
}

.linkfood:hover {
  color: var(--aa-color);
}

.linkculture:hover {
  color: var(--aa-color);
}


/* End Navbar */


/* Start Main */

.injera-menu {
  background-size: cover;
  overflow: hidden;
  width: 100%;
  height: 10%;
  display: block;
}

.ourmenutext {
  position: absolute;
  margin-top: -25%;
  font-size: 400%;
  background: -webkit-linear-gradient(#10CB00, #10CB00, #FFC701, #FF0101, #FF0101);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 3px white;
  -webkit-text-stroke: 3px black;
  margin-left: 3%;
}

.menuoptions {
  display: flex;
  width: 100%;
  justify-content: center;
}

.mainoption {
  margin: 2% 5%;
  color: var(--aa-color);
}

.vegoption {
  margin: 2% 5%;
}

.specialoption {
  margin: 2% 5%;
}

.drinksoption {
  margin: 2% 5%;
}

.vegoption:hover {
  color: var(--aa-color)
}

.specialoption:hover {
  color: var(--aa-color)
}

.drinksoption:hover {
  color: var(--aa-color)
}


/* Start Menu */

.menu {
  position: relative;
}


/* Start Main Menu */

.menumain {
  justify-content: center;
  color: var(--aa-color)
}

.price {
  float: right;
  border: 1px solid var(--aa-color);
  padding: 1% 2%;
}

.dishtitle {
  margin-left: 40%;
  text-decoration: underline;
}

.dishinfo {
  padding: 5% 10%;
  font-size: 150%;
}

.menu-item {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
}

.menuveg {
  justify-content: center;
  color: var(--aa-color);
  display: none;
}


/* End Vegetarian Menu */


/* End Menu */


/* End Main */

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Addis Abeba | Menu</title>
  <link rel="stylesheet" href="/css/menu.css">
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
</head>

<body>
  <!-- Start Navbar -->
  <nav>
    <div class="navbar-wrapper">
      <div class="leftside">

      </div>
      <div class="rightside">
        <div class="options">
          <a href="#" class="linkhome">Home</a>
          <a href="menu.html" class="linkmenu">Menu</a>
          <a href="#" class="linkabout">About Us</a>
          <a href="#" class="linkfood">Our Food</a>
          <a href="#" class="linkculture">Ethiopian Culture</a>
        </div>
      </div>
    </div>
  </nav>
  <!-- End Navbar -->

  <!-- Start Main -->
  <div class="our-menu">
    <div class="ourmenusection">
      <div class="img1">
        <img src="img/injera.png" alt="injera" class="injera-menu">
      </div>
      <div class="text-ourmenu">
        <h1 class="ourmenutext">

          Menu</h1>
      </div>
    </div>
  </div>

  <div class="menuoptions">
    <h2 class="mainoption">Main</h2>
    <button type="button" class="vegbut" name="button" onclick="showveg()"><h2 class="vegoption">Vegetarian</h2></button>
    <button onclick="showveg()">Click me</button>
    <h2 class="specialoption">Special</h2>
    <h2 class="drinksoption">Drinks</h2>
  </div>

  <div class="menu">

    <!-- Start Main Menu -->
    <div class="menumain">
      <div class="menu-item">
        <div class="price">
          <p>CHF 21.-</p>
        </div>
        <div class="dishtitle">
          <h1>Key Wat</h1>
        </div>
        <div class="dishinfo">
          Tender morsels of meat prepared in specially spiced butter, seasoned with onions and green peppers, sprinkled with garlic and ginger.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 23.-</p>
        </div>
        <div class="dishtitle">
          <h1>Doro Wat</h1>
        </div>
        <div class="dishinfo">
          Chicken cooked in specially seasoned red sauce and Ethiopian butter.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 23.-</p>
        </div>
        <div class="dishtitle">
          <h1>Yebeg Wat</h1>
        </div>
        <div class="dishinfo">
          Morsels of lamb prepared in special herb butter, seasoned with onions and green peppers and sprinkled with garlic and ginger.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 25.-</p>
        </div>
        <div class="dishtitle">
          <h1>Kitfo</h1>
        </div>
        <div class="dishinfo">
          Steak tartare, Ethiopian style, seasoned with special hot red pepper and spiced butter
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 24.-</p>
        </div>
        <div class="dishtitle">
          <h1>Beef Tibs</h1>
        </div>
        <div class="dishinfo">
          Strips of beef sauteed with onion and pepper.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 24.-</p>
        </div>
        <div class="dishtitle">
          <h1>Lamb Tibs</h1>
        </div>
        <div class="dishinfo">
          Cubes of lamb fried in buter, onions, green and black peppers.
        </div>
      </div>
    </div>

    <!-- Start Vegetarian Menu -->

    <div class="menuveg">
      <div class="menu-item">
        <div class="price">
          <p>CHF 21.-</p>
        </div>
        <div class="dishtitle">
          <h1>Shiro</h1>
        </div>
        <div class="dishinfo">
          Tender morsels of meat prepared in specially spiced butter, seasoned with onions and green peppers, sprinkled with garlic and ginger.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 23.-</p>
        </div>
        <div class="dishtitle">
          <h1>Doro Wat</h1>
        </div>
        <div class="dishinfo">
          Chicken cooked in specially seasoned red sauce and Ethiopian butter.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 23.-</p>
        </div>
        <div class="dishtitle">
          <h1>Yebeg Wat</h1>
        </div>
        <div class="dishinfo">
          Morsels of lamb prepared in special herb butter, seasoned with onions and green peppers and sprinkled with garlic and ginger.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 25.-</p>
        </div>
        <div class="dishtitle">
          <h1>Kitfo</h1>
        </div>
        <div class="dishinfo">
          Steak tartare, Ethiopian style, seasoned with special hot red pepper and spiced butter
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 24.-</p>
        </div>
        <div class="dishtitle">
          <h1>Beef Tibs</h1>
        </div>
        <div class="dishinfo">
          Strips of beef sauteed with onion and pepper.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 24.-</p>
        </div>
        <div class="dishtitle">
          <h1>Lamb Tibs</h1>
        </div>
        <div class="dishinfo">
          Cubes of lamb fried in buter, onions, green and black peppers.
        </div>
      </div>
    </div>
  </div>

  <!-- End Main -->
</body>

</html>

我想向您建议一些可以使您的工作更好的事情：