Toggle button on load with JS

Question

I have a problem where a menu I have, pops up when you go to the page or refresh it, and I want it to be hidden until a user clicks its designated toggle button. The simplest way I can think of to fix this is to write a command that basically hits the toggle button automatically when the page loads, but I can't figure out how to do that.

Here's my code: The container myNav contains a bunch of code for a fullscreen popup menu. I didn't include it because it's just a bunch of links that would take up space here.

<div id="myNav" class="overlay">
</div>

<button id="header-mobile-menu-button" onclick="toggleMobileMenu()">
                <svg class="header-mobile-menu-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1697.56 428.94"><defs><style>.cls-1,.cls-2{fill:var(--font-color);}.cls-1{stroke:none;stroke-miterlimit:10;}</style></defs><circle class="cls-1" cx="214.47" cy="214.47" r="213.97"/><circle class="cls-1" cx="849.03" cy="214.47" r="213.97"/><circle class="cls-2" cx="1483.59" cy="214.47" r="213.97"/>
                </svg>
                <script>
    function toggleMobileMenu() {
  var x = document.getElementById("myNav");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

I'm hoping to do something like: onload=function toggleMobileMenu, but I can't figure out the syntax.

Please share your html. Specially myNav element

Alireza Ahmadi
– Alireza Ahmadi

2021-07-19 12:14:17 +00:00
Commented Jul 19, 2021 at 12:14 — Alireza Ahmadi
– Alireza Ahmadi, Commented Jul 19, 2021 at 12:14
@AlirezaAhmadi I did it.

Alexander
– Alexander

2021-07-20 02:10:24 +00:00
Commented Jul 20, 2021 at 2:10 — Alexander
– Alexander, Commented Jul 20, 2021 at 2:10

Alireza Ahmadi · Accepted Answer · 2021-07-20 04:05:42Z

1

You just need to add display:none to nav and in your function set display:block

        function toggleMobileMenu() {
            var x = document.getElementById("myNav");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }

    <div id="myNav" style="display:none;" class="overlay">
        this is my nav
    </div>

    <button id="header-mobile-menu-button" onclick="toggleMobileMenu()">
        <svg class="header-mobile-menu-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1697.56 428.94">
            <circle class="cls-1" cx="214.47" cy="214.47" r="213.97" />
            <circle class="cls-1" cx="849.03" cy="214.47" r="213.97" />
            <circle class="cls-2" cx="1483.59" cy="214.47" r="213.97" />
        </svg>
        click to show nav
    </button>

answered Jul 20, 2021 at 4:05

Alireza Ahmadi

10.2k8 gold badges28 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexander Over a year ago

Thank you so much! I don't why I missed that

AbhishekGowda28 · Accepted Answer · 2021-07-19 15:44:15Z

Syntax to have inline events call is <Element eventName="functionName()"></Element>, as you can see we are not only mentioning the functionName but attaching it as a function to the event. But this is not recommended way of doing, inline Event Handlers.

Not recommended way

<div id="myNav" onload="hideMyNavOnLoad()"> </div>
<script>
function hideMyNavOnLoad() {
    const MyNavElement = document.getElementById("myNav");
    MyNavElement.style.display = "none";
}
</script>

Proper way of doing this is finding the element, through queries. And attaching an event handler for it.

<div id="myNav"> </div>

<script>
const MyNavElement = document.getElementById("myNav");

function onNavLoad(event) {
    MyNavElement.style.display = "none";
}

MyNavElement.addEventListener("load", onNavLoad);

</script>

Collectives™ on Stack Overflow

Toggle button on load with JS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related