CODEWITHSUNDEEP
javascripthtmlcss
Hedgy
Hedgy

Reputation: 356

UL element width not changing with JS

I currently have a ul acting as the navbar. I want it to open with the click of a button by changing its width, but it's not working. When the button is clicked nothing happens, however it should change the width and make the ul appear.

function openNav() {
            document.getElementByClass("nav").style.width = "250px";
        }

        function closeNav() {
            document.getElementByClass("nav").style.width = "0px";
        }
.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 0;
  background-color: #f1f1f1;
  height: 100%; /* Full height */
  position: fixed; /* Make it stick, even on scroll */
  overflow: auto; /* Enable scrolling if the sidenav has too much content */
  transition: 0.5s;
}

.nav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
<button onclick="openNav()">Open Nav</button>

    <ul class="nav">
        <li><a href="{% url 'sheets:list' %}" class="">Nav Element</a></li>
    </ul>

Upvotes: 1

Views: 71

Answers (3)

ajobi
ajobi

Reputation: 3116

There is no such thing as getElementByClass(), you should use getElementsByClassName() instead, like in this code example:

function openNav() {
  document.getElementsByClassName("nav")[0].style.width = "250px";
 }

function closeNav() {
  document.getElementsByClassName("nav")[0].style.width = "0px";
}

Upvotes: 2

davitSahakyan
davitSahakyan

Reputation: 31

You can make so 

     <button onclick="openNav()">Open Nav</button>

    <ul id='nav'>
        <li><a href="{% url 'sheets:list' %}" class="">Nav Element</a></li>
    </ul>

  </ul>

<button onclick="openNav()">Open Nav</button>

<ul id="nav">
    <li><a href="{% url 'sheets:list' %}" class="">Nav Element</a></li>
</ul>

and width will change but you cant see it so change font-size

Upvotes: 0

Ronak07
Ronak07

Reputation: 894

You have misspelled the DOM element as getElementByClass it should be getElementsByClassName and the alternate thing would you can also make use of querySelector which is quite helpful sometimes.

Here is the code I have updated it for both the events.

.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 0;
  background-color: #f1f1f1;
  height: 100%; /* Full height */
  position: fixed; /* Make it stick, even on scroll */
  overflow: auto; /* Enable scrolling if the sidenav has too much content */
  transition: 0.5s;
}

.nav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
<script>
        function openNav() {
            document.querySelector(".nav").style.width = "250px";
        }

        function closeNav() {
            document.querySelector(".nav").style.width = "0px";
        }
    </script>
    <button onClick="openNav()">Open Nav</button>
    <button onClick="closeNav()">Close Nav</button>
    <ul class="nav">
        <li><a href="{% url 'sheets:list' %}" class="">Nav Element</a></li>
    </ul>

Upvotes: 1

Related Questions