Search code examples
javascripthtmlonclicklistenerevent-listener

JS eventListener clicking problems

I just need some help with this small header of my project. I decided to include all the header files so you can run it in snippet and check for yourself what is happening. The only thing that I have having problem with is my JS file. If you run the file, you would get a menu bar and a shopping cart on top, I designed them to not open up at the same time hence the if else statements. Now the problem is after the web page loads, I cannot open the menu bar right away no matter how many times I click it. But, if I try to click the shopping cart, it would require two clicks before it drops down and works. But here's the weird part, after the shopping cart has dropped down, the menu bar would now work. After this occurrence, everything works the way they are intended to work. A little help please, I am currently stuck on this one. Thanks!

var showShoppingBtn = document.getElementById('shopping-cart');
var showShopping = document.getElementById('top-dropdown');


showShoppingBtn.addEventListener('click', ()=>{

    if(showShopping.style.display == 'none' && showMenu.style.display == 'none'){
        showShopping.style.display = 'block';
    } 
    else if(showShopping.style.display == 'none' && showMenu.style.display == 'block'){
        showMenu.style.display = 'none';
        showShopping.style.display = 'block';
    }
    else {
        showShopping.style.display = 'none';
    }
});

var menuBtn = document.getElementById('menu-button');
var showMenu = document.getElementById('bottom-dropdown');

menuBtn.addEventListener('click', ()=>{

    if(showMenu.style.display == 'none'  && showShopping.style.display == 'none'){
        showMenu.style.display = 'block';
    } else if(showMenu.style.display == 'none' && showShopping.style.display == 'block'){
        showShopping.style.display = 'none';
        showMenu.style.display = 'block';
    } else {
        showMenu.style.display = 'none';
    }
});
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");

body {
    font-family: "Montserrat", sans-serif;
    margin:0;
    padding: 0;
}
.top-content{
    background: orange;
    display: flex;
}
.shopping-menu{
    width: 100%;
}
#shopping-cart{
   font-size: 2.5em;
   cursor: pointer;
   padding-right: 0;
   float: right;
   margin-right: 1em;
}
.top ul{
    margin-top: 3em;
    list-style: none;
    margin-right: 1em;
}
.top li{
    padding-right: 1.2em;
    margin-bottom: .5em;
    text-align: right;
    text-transform: uppercase;
}
.top-content-container{
    width: 100%;
}
.top-dropdown{
    display: none;
}
.site-logo img{
    position: absolute;
    width: 100vw;
    display: none;
}
.bottom{
    background-color:#0e1338;
    color: white;
    display: flex;
    position: relative;
}
.menu{
    padding-right: 1em;
    width: 100%;
}
.menu-button{
    float: right;
    cursor: pointer;
    padding-right: 1em;
}
.bottom-content-container{
    margin-left: auto;
    margin-right: 0;
    text-align: right;
    padding-right: 1em;
}
.bottom-content-container ul{
    list-style: none;
}
.menu-bar{
    width: 3em;
    height: .5em;
    background-color: white;
    margin: .5em 0;
}
.bottom-dropdown{
    display: none;
    margin-top: 4em;
    text-align: right;
}
.bottom-dropdown li{
    margin: .7em 0;
    text-transform: uppercase;
}
.top li a{
    color: black;
    text-decoration: none;
}
.bottom li a{
    text-decoration: none;
    color: white;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles/header.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>
  <body>
    <section class="top">
      <div class="top-content">
        <nav class="shopping-menu">
        <i class="fa fa-shopping-cart" id="shopping-cart"></i>
        <div class="top-content-container">
              <div class="top-dropdown" id="top-dropdown">
              <ul>
                <li><a href="#">Cart</a></li>
                <li><a href="#">Checkout</a></li>
                <li><a href="#">My Purchases</a></li>
              </ul>
            </div>
        </nav>
        </div>
      </div>
    </section>
    <section class="bottom">
      <div class="site-logo">
        <img src="images/AutoNation-logo.png" alt="AutoNation Logo">
      </div>
      <nav class="menu">
        <div class="menu-button" id="menu-button">
          <div class="menu-bar"></div>
          <div class="menu-bar"></div>
          <div class="menu-bar"></div>
        </div>
        <div class="bottom-content-container">
          <ul>
            <div class="bottom-dropdown" id="bottom-dropdown">
              <li><a href="#">Services</a></li>
              <li><a href="#">Special Offers</a></li>
              <li><a href="#">Browse</a></li>
              <li><a href="#">Contact</a></li>
              <li><a href="#">Location</a></li>
              <li><a href="#">My Account</a></li>
            </div>
          </ul>
      </nav>
      </div>
    </section>
    <script src="scripts/header.js"></script>
  </body>
</html>

Solution

  • It's because first time you entered the click function both style.display are not filled. so the condition

    showShopping.style.display == 'none' && showMenu.style.display == 'none'

    will not be evaluate

    one quick solution to use your code is to initialize style.display at the end of the js part

    showShopping.style.display = 'none';
showMenu.style.display = 'none'