Barry B Barry B - 2 years ago 370
Javascript Question

JavaScript addEventListener

He Stackoverflow,

Question is simple,
If the window size is smaller than width 960px i can click a menu button.
When i click it the nav height will be 325px instead of 60px and thats what i wanted to happen. It works but, you only can see the result if you click the button for the second time. Can someone explain why this happens?



// GET DOM

var getdom = (function(){

var DOMstrings = {
menuBtn: '#menu',
navToggle: 'nav',
}

return {
getDOMstrings: function(){
return {
menu: document.querySelector(DOMstrings.menuBtn),
nav: document.querySelector(DOMstrings.navToggle),
}
}
}


})();

// Global Controllor

var global = (function(dom){

var get = dom.getDOMstrings();


function start(){
// MENU NAV HEIGHT
get.menu.addEventListener('click', function(){
console.log('click!');

if(get.nav.style.height === '60px'){
get.nav.style.height = '325px';
}else {
get.nav.style.height = '60px';
}

});




}


return {
init: function(){
start();
}
}

})(getdom);

global.init();

html, body {
margin: 0;
padding: 0;
}

#header {
width: 100%;
height: 150px;
background-color: gray;
}

nav {
width: 100%;
height: 60px;
text-align: center;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
transition: all 1s;
}

#brand {
position: absolute;
font-size: 32px;
left: 10px;
top: 8px;
}

#menu {
position: absolute;
left: 140px;
top: 20px;
display: none;
cursor: pointer;
}


nav ul {
list-style-type: none;
padding-top: 15px;
}

nav ul li {
display: inline;
font-size: 22px;
}

nav ul li a {
text-decoration: none;
color: darkslategray;
border-right: 1px solid black;
padding: 10px 11px;
transition: all 0.5s;
}

.nav-link:hover {
font-size: 24px;
}

#dropdown {
padding-left: 10px;
cursor: pointer;
transition: all 0.5s;
}


@media screen and (max-width: 965px) {
nav {
height: 325px;
}
}

@media screen and (max-width: 960px) {
nav ul li {
display: block;
border-bottom: 1px solid black;
padding-bottom: 10px;
padding-top: 10px;
margin-left: -10%;
}

.margintop {
margin-top: 50px;
}

nav ul li a {
border-right: 0px;
padding: 0px;
}

#dropdown {
padding-left: 0px;
}
}

@media screen and (max-width: 959px){
nav {
height: 60px;
}

#menu {
display: block;
}
}

<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Website</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<nav>

<div id="brand">BRAND</div>
<div id="menu">MENU</div>
<ul>
<li class="margintop"><a href="#" class="nav-link">Home</a></li>
<li><a href="#" class='nav-link'>About us</a></li>
<li><a href="#" class='nav-link'>Services</a></li>
<li><a href="#" class='nav-link'>Contact</a></li>
<li id="dropdown" class='nav-link'>More</li>
</ul>

</nav>


<header id="header">
</header>


<script src="app.js"></script>


</html>




Answer Source

You need to use get.nav.getBoundingClientRect().height to get the initial height value.

So in this case you can compare "real" value with your points (325 or 60).

As @squint mentioned in comments, you can't rely on style's height property. Try to go with getBoundingClientRect (MDN) instead.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download