1

I am building a webpage. On my menu page, I'm trying to make a feature that, when I click the vegetarian options, the main options disappear and and the vegetarian options appear. However this requires the use of javascript, and I am very new to javascript. I made a function called showveg() (below) but and made an onclick function for my button but nothing happens. Here's my code.

// 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>

Any help is greatly appreciated. Thanks!

Improve this question
1
  • hey there! as a side note, try creating an online demo using jsbin or jsfiddle to make it easier to understand. Commented Aug 29, 2020 at 7:14

4 Answers 4

Reset to default
5

So you did a couple of bad things here that I would like to suggest you to change:

  1. You used document.getElementsByClass("menumain") which does not exists! The correct way to use it is document.getElementsByClassName("menumain")[0]. You are using [0] since getElementsByClassName returns HTML Collection Object (which access to it is like to arrays), and since you have only 1 element with class menumain, this element will be the first item in the array (index 0).
  2. Since you have literally the same style for each menu item, you don't need a separate class for each item - it just makes your code messy, long and unpleasant to read. So in the snippet below I switched every menu item to be menu-item class and removed from the css what was not needed anymore.
  3. In order for elements not to take place while they are invisible, use style.display = "none" instead of style.visibility = "hidden". If you won't do this you will have a white gap of nothing there (because the elements exists on the page but are hidden).
  4. In order for an entire menu to be hidden, you don't need to hide every element in the menu. You only need to hide the parent of all those elements (in this case it's menuveg).

Below there is the snippet with all the things I wrote here:

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>

I would like to suggest you a couple of things that will make your work better:

  1. If something doesn't work for you - check the internet how to do things or open the console and see if there are any errors that your code throws.
  2. The convention for css class is menu-item and not menuitem.
  3. You have A LOT of css classes with the same style. Why not gather them all under the same class? Just like I did with your menu-item
  4. You can use javascript code to add to your page all the menu items instead hard coding them into the html - it will make your work easier.

Good Luck :D

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

"getElementsByClassName returns array". Not really. It returns a HTML Collection Object.
4

Kindly ignore if you are already aware of this.

When you don't see the expected output in browser, then you have to use the developer tools to view the errors in the console first.

By viewing the error in the console you can easily find the error in the solution.

Here the solution provided by @Retic seems to be okay.

console window error

Improve this answer

Comments

2

It looks like it may be a result of the use of "getElementsByClass" this method does not exist. "getElementsByClassName" may be the one you where looking for.

Change

document.getElementsByClass("menumain").style

To

document.getElementsByClassName("menumain")[0].style

Remember that the function returns a list, so you have to check if it returns anything first. you can do this using the .length property.

document.getElementsByClassName("menumain")[0].lenght

Improve this answer

Comments

1

You should include your script at starting of the code on top before calling it.

Improve this answer

1 Comment

It may be failing due to getElementsByClass, this should be getElementsByClassName.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.