CODEWITHSUNDEEP
javascripthtml
Alexander
Alexander

Reputation: 151

Toggle button on load with JS

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.

Upvotes: 0

Views: 974

Answers (2)

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9903

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>

Upvotes: 1

AbhishekGowda28
AbhishekGowda28

Reputation: 1054

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>

Upvotes: 0

Related Questions