CODEWITHSUNDEEP
javascripthtmlcssmenuonclick
Pobi
Pobi

Reputation: 19

Unable to get my menu button to show the menu on click (using inline JS)

this is the html


<script>
    var = navLinks = Document.getElementById(navLinks);

    function showMenu(){
        navLinks.style.right = "0";
    }
    function hideMenu(){
        navLinks.style.right = "-200px";
    }

</script>

this is the css

    .nav-links{
        position: absolute;
        background: red;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;

I am not sure why when onclick nothing happens, to my knowledge ive done the JS correctly.

further up in the html I have this

<i class="fa fa-bars" onclick="showMenu()"></i>

and

<div class="nav-links" id="navLinks">
                <i class="fa fa-times" onclick="hideMenu()"></i>

Upvotes: 0

Views: 505

Answers (2)

Arda Akkaya
Arda Akkaya

Reputation: 11

You should change your code from this

<script>
    var = navLinks = Document.getElementById(navLinks);

    function showMenu(){
        navLinks.style.right = "0";
    }
    function hideMenu(){
        navLinks.style.right = "-200px";
    }

</script>

to,

<script>
    var navLinks = document.getElementById("navLinks");

    function showMenu(){
        navLinks.style.right = "0";
    }
    function hideMenu(){
        navLinks.style.right = "-200px";
    }

</script>

Upvotes: 1

vitaliyirtlach
vitaliyirtlach

Reputation: 333

"Document" must be "document" and navLinks must be string type

var navLinks = document.getElementById("navLinks");

Upvotes: 0

Related Questions