My javascript function not showing response
I don’t know why but my code is not working I want to make a responsive navbar
HTML CODE
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title></title> </head> <body> <nav class="navbar" id="navbar"> <i class="fa fa-bars" aria-hidden="true" onclick="navigation()"></i> <a href="#" class="logo">The Big Blog </a> <div id="navLis"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Get Started</a></li> <li><a href="#">Popular Bloggers</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact U</a></li> </ul> </div> </nav> <script src="js/app.js" type="text/javascript" charset="utf-8"></script> </body> </html> CSS CODE
*{ margin: 0; padding: 0; box-sizing: border-box; } li { list-style-type: none; } a { text-decoration: none; } #navLis { display: none; } nav ul{ margin-top: 20px; color: white; background: black; } nav{ height:100px; background: white; border-bottom: 2px solid black; position: relative; background: #8dc09b; } nav li { display: inline-block; padding: 6px; } nav li a { color: white; display: inline-block; } nav i { display: none!important; font-size: 2em!important; position: absolute; top: 10px; right: 10px; transform: translate(-10px); } .logo{ font-size: 25px; margin: 20px; padding: 10px!important; } @media (max-width:668px){ nav { height: 60px; } nav li { text-align: center; display: block; } nav i { display: block!important; } } Javascript Code
function navigation() { const navLis = document.getElementById('navLis'); if (navLis.style.display = 'none') { navLis.style.display = 'block'; }else{ navLis.style.display = 'none'; } } My problem is that My div with id navLis has display none and I have written in JavaScript that when it is display none do display block ???? simple! Buy when I click on hamburger my navigation () is just making it visible but when I click again to hide my list it is not working
You made a small type there:
function navigation() { const navLis = document.getElementById('navLis'); if (navLis.style.display === 'none') { navLis.style.display = 'block'; }else{ navLis.style.display = 'none'; } this should work.
To check if navLis.style.display is ‘none’ you used =, instead of === you assigned is the value none there
