CODEWITHSUNDEEP
javascripthtml
Oscar Andersson
Oscar Andersson

Reputation: 53

JavaScript not responding to onclick

I want to toggle the visibilty of a navigation list with a "burger"/<img> button.

<img onclick="dropdownMenu()" class="burger" src="img/icon/menu.png"></img>

I want this button to fire off this script wich is placed in <head> and inside a <script> tag.

<script>
        function dropdownMenu() {
            document.getElementsByTagName("nav").classList.toggle("show");
        }
</script>

The menu looks like this.

<nav>
     <ul class="menu">
          <li><a href="index.php">Hem</a></li>
          <li><a href="store.php">Festivaler</a></li>
          <li><a href="contact.php">Kontakt</a></li>
     </ul>
</nav>

I've had tried with .classList.toggle("show"); and .style.display = "none"; and also done some simple testing with changing the color. Is my syntax wrong or is it something else?

Upvotes: 0

Views: 86

Answers (4)

mbuhse
mbuhse

Reputation: 1

Here is a solution that toggles:

<nav id="nav1">
        <ul class="menu">
          <li><a href="index.php">Hem</a></li>
          <li><a href="store.php">Festivaler</a></li>
          <li><a href="contact.php">Kontakt</a></li>
        </ul>
</nav>

<script>
        function dropdownMenu() {
          document.getElementById("nav1").classList.toggle("show");
        }
</script>

<style>
.show {
display: none;
}
</style>

Upvotes: 0

Oscar Andersson
Oscar Andersson

Reputation: 53

I think its done now.

 <script>
        function nav(){
            document.getElementById("nav").style.visibility="hidden";
        }
    </script>

<img onclick="nav()" class="burger" src="img/icon/menu.png"></img>
                <nav id="nav">
                    <!-- navigationslista -->
                    <ul class="menu">
                        <li><a href="index.php">Hem</a></li>
                        <li><a href="store.php">Festivaler</a></li>
                        <li><a href="contact.php">Kontakt</a></li>
                    </ul>
                </nav>

I just have to make it toggle. Thank you guys. :D

Upvotes: 0

Andrew La Grange
Andrew La Grange

Reputation: 312

Rather than using a getElementByTag, look to using an ID to select the tag more explictly; finding by class or by tag will return a collection, whereas finding by ID will return an element.

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

Once you have the item by ID you'll need to use style.display = "none"; or include Jquery and then you can use the toggle, in which case you would also just find the element with a Jquery selector.

Upvotes: 1

Filipe
Filipe

Reputation: 1798

The function getElementsByTagName returns a list of DOM elements, to get a single one you must select the item from the list. That being said:

function dropdownMenu() {
    document.getElementsByTagName("nav")[0].classList.toggle("show");
}

Upvotes: 7

Related Questions