JS eventListener clicking problems
Question
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>
3 answers
solution1
1 2021-10-29 06:04:00
It's because first time you entered the click function both style.display are not filled so condition
showShopping.style.display == 'none' && showMenu.style.display == 'none'
will not be evaluate
on quick solution to use the code you build is to initialize style.display at the end of the js part
showShopping.style.display = 'none';
showMenu.style.display = 'none'
solution2
0 2021-10-29 06:04:39
When you do element.style.someStyle , you access only the inline style of the element. So the first time you click on showShoppingBtn it will pass in the last else -> setting the inline style of it to display: none .
A quick fix to that would be to add inline style directly in the html. like so :
<div class="top-dropdown" id="top-dropdown" style="display: <The defautl display you want>;">
And
<i class="fa fa-shopping-cart" id="shopping-cart" style="display: <The default display you want>;"></i>
solution3
0 2021-10-29 06:11:28
- Your HTML is invalid
- You really should toggle a class. Add class hide to the menus and have
.hide {display:none}
Then you can do
showShoppingBtn.addEventListener('click', () => {
showMenu.classList.add("hide")
showShopping.classList.toggle("hide")
});
menuBtn.addEventListener('click', () => {
showShopping.classList.add("hide")
showMenu.classList.toggle("hide")
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.