Toggle a view

I have got an issue when I am trying to toggle the view, It works but not the way I want,
after refreshing the page when you are pressing the button it is gonna work on the second click but after that it is working on the first , how can I resolve the problem ?

I created a function and created this :

var menuGet = document.getElementById("dropdown-content");
var menuOpen = () => {

 

 if(menuGet.style.display === "none") {

   menuGet.style.display = 'block';

 }

 else {

   menuGet.style.display = 'none';

 }

};

after refreshing the page when you are pressing the button it is gonna work on the second click but after that it is working on the first

What do you mean by this? It’s a little unclear.

The way you write your code for the onclick listener is also going to affect how this gets run. If you share that bit it could become clearer what the issue is as well.

what I mean is if you are going to click the button when you are opening the page or refreshing it is going to open on the double click , not on a single click

but later after you have done it once it is gonna work normally on a single click.

there is html bit

<div id="mobile-bar" onmouseover="dotChange()" onmouseout="dotChangeBack()" onclick="menuOpen()">
                <div id="mobile-bar-dot" class="mobile-dot"></div>
                <div class="mobile-bars"></div>
                <div class="mobile-bars"></div>
                <div class="mobile-bars"></div>
                
            <div id="dropdown-content">
                <ul id="dropdown-list" class="dropdown-go">
                    <li class="text-center li-dropdown"><a href="#">Home Page</a></li>
                    <li class="text-center li-dropdown"><a href="#">About Me</a></li>
                    <li class="text-center li-dropdown"><a href="#">Projects</a></li>
                    <li class="text-center li-dropdown"><a href="#">Contact</a></li>
                    <br><br>
                    <li class="li-dropdown grey-color text-center">Marcin Przytarski</li>
                </ul>
            </div>
            </div>
onclick="menuOpen()"

try instead

onclick="menuopen"

Or you might have to reconnect it with an eventListener. I remember running into this quirk and the method call was the culprit.

Or it might be something about the variable tracking… check what the console says the value is for menuGet.style.display. Maybe something like setting a tracker in the localstorage would do the trick better.

onclick="menuopen"

It is not working, It only works in the way I have done it.

menuGet.style.display

returns “block”

Yes, I meant for re-writing it with eventListener. Sorry if that wasn’t clear. Actually, did you try the localstorage idea?

alright I will rewrite it with eventListener and let’s see then. I am not so sure how to do the localstorage probably I have go through this yet

1 Like

It’s very simple:

You can just save a variable that tracks every time the page loads, display is set to none.

Very important note! 
Never store sensitive data in localstorage.