Button working only with two clicks using addEventlistener

Question

Been trying to find ways to get my menu button to work with just one click but it only works when you click it two times. The button causes the opacity of the menu to go from 0 to 1 so it will slowly pop up in the top right. Anyone offer any ideas how to solve this problem I'm having. I know something is being called first before the menu bars start to reappear but not sure which one and I tried a few other alternatives.

 function toggleMenu() { var x = document.getElementById("navi"); if (x.style.opacity === "0") { x.style.opacity = "1"; x.classList.add("navigation"); } else { x.style.opacity = "0"; } }; window.onload = function() { var click = document.getElementById("menuToggle") click.addEventListener("click", toggleMenu); }; 

 * { margin: 0; padding: 0; } html, body { margin: 0; padding: 0; overflow-x: hidden; height: 100%; } /* first menu */ #navi { opacity: 0; text-align: center; height: 40px; width: -50%; z-index: 1; transition: all 3s ease; } #navi li { float: right; display: inline; color: white; margin: 20px; padding: 15px; width: 100px; background-color: rgba(194, 147, 129, .7); font-family: 'Cabin', sans-serif; cursor: pointer; } #navi.navigation { opacity: 1; height: 40px; } /* second menu */ #title { padding-top: 50px; position: relative; } #title li { display: inline-block; color: red; margin: 50px; } #title li button { padding: 10px; width: 100px; border: 2px solid #F5ECE1; background-color: #C29381; color: white; cursor: pointer; font-family: 'Cabin', sans-serif; } #title li button:hover, #nav li:hover { background-color: rgba(166, 99, 72, .7); } #demo { text-align: center; font-size: 60px; padding-bottom: 50px; } .parallax { background-image: url(img/beans.jpg); width: 100%; min-height: 100%; } .parallax { background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; z-index: 0; } .textBox { position: absolute; top: 50%; width: 100%; text-align: center; font-size: 30px; color: white; font-family: 'Cabin', sans-serif; } .textBox h1 { position: absolute; bottom: 150%; text-align: center; width: 100%; font-size: 300%; } .textBox .border { background-color: #C86428; color: #fff; padding: 20px; } .textBox .border.trans { background-color: transparent; font-size: 40px; } .contact-icon { width: 5%; opacity: 0; transition: all 3s ease; } .contact-icon img { width: 4%; margin: 10px; } .contact-icon.iToggle { opacity: 1; width: 100%; } 

 <div class="parallax"> <ul id="navi"> <li>Recipe</li> <li>Experiment</li> <li>About</li> </ul> <div class="textBox"> <h1>Mad Monks Brewing Co</h1> <p id="demo"></p> <span class="border"> Coming Soon </span> <ul id="title"> <li> <button id="menuToggle">Menu</button></li> <li> <button onclick="iconToggle()">Contact</button> </li> </ul> <section id="social-icon" class="contact-icon"> <img src="img/facebook.png"> <img src="img/instagram.png"> <img src="img/twitter.png"> </section> </div> </div> 

Answer 1

The problem is that, on page load, the element in question doesn't have an opacity property; it's not 0 or 1, it's blank (empty string). Fix it by turning it into a test of truthyness, which will work for both a blank value and for "0" :

if (!x.style.opacity) {

Like

 function toggleMenu() { var x = document.getElementById("navi"); if (!x.style.opacity) { x.style.opacity = "1"; x.classList.add("navigation"); } else { x.style.opacity = "0"; } } window.onload = function() { var click = document.getElementById("menuToggle") click.addEventListener("click", toggleMenu); }; 

 * { margin: 0; padding: 0; } html, body { margin: 0; padding: 0; overflow-x: hidden; height: 100%; } /* first menu */ #navi { opacity: 0; text-align: center; height: 40px; width: -50%; z-index: 1; transition: all 3s ease; } #navi li { float: right; display: inline; color: white; margin: 20px; padding: 15px; width: 100px; background-color: rgba(194, 147, 129, .7); font-family: 'Cabin', sans-serif; cursor: pointer; } #navi.navigation { opacity: 1; height: 40px; } /* second menu */ #title { padding-top: 50px; position: relative; } #title li { display: inline-block; color: red; margin: 50px; } #title li button { padding: 10px; width: 100px; border: 2px solid #F5ECE1; background-color: #C29381; color: white; cursor: pointer; font-family: 'Cabin', sans-serif; } #title li button:hover, #nav li:hover { background-color: rgba(166, 99, 72, .7); } #demo { text-align: center; font-size: 60px; padding-bottom: 50px; } .parallax { background-image: url(img/beans.jpg); width: 100%; min-height: 100%; } .parallax { background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; z-index: 0; } .textBox { position: absolute; top: 50%; width: 100%; text-align: center; font-size: 30px; color: white; font-family: 'Cabin', sans-serif; } .textBox h1 { position: absolute; bottom: 150%; text-align: center; width: 100%; font-size: 300%; } .textBox .border { background-color: #C86428; color: #fff; padding: 20px; } .textBox .border.trans { background-color: transparent; font-size: 40px; } .contact-icon { width: 5%; opacity: 0; transition: all 3s ease; } .contact-icon img { width: 4%; margin: 10px; } .contact-icon.iToggle { opacity: 1; width: 100%; } 

 <div class="parallax"> <ul id="navi"> <li>Recipe</li> <li>Experiment</li> <li>About</li> </ul> <div class="textBox"> <h1>Mad Monks Brewing Co</h1> <p id="demo"></p> <span class="border"> Coming Soon </span> <ul id="title"> <li> <button id="menuToggle">Menu</button></li> <li> <button onclick="iconToggle()">Contact</button> </li> </ul> <section id="social-icon" class="contact-icon"> <img src="img/facebook.png"> <img src="img/instagram.png"> <img src="img/twitter.png"> </section> </div> </div>