0

I want my function(dropFunction(), which makes the div #dropdownList appear) to run on the first click of my button(#drop-btn), however, I must click it twice for the function to run, but only the first time. After this first double click, it runs as it should. How do I make it so it runs on the first click, rather than the second this first time? CSS:

function dropFunction() {
       var x = document.getElementById("dropdownList")
       if (x.style.display === "none") {
            x.style.display = "block"
        } else {
             x.style.display = "none"
             }
        }
#dropdownList {
                display:none;
            }
<div class="dropdown">
   <button onclick = "dropFunction()" class="drop-btn">Menu</button>
   <div id="dropdownList">
       <a href="#">Link 1</a>
       <a href="#">Link 2</a>
       <a href="#">Link 3</a>
    </div>
</div>
Harmandeep Singh Kalsi
  • 3,315
  • 2
  • 14
  • 26
  • There is no inline style applied to the button when the page is loaded. So the first click will add `display: none`. To read a CSS property you need to use [getComputedStyle](https://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript) – Turnip Jul 24 '20 at 08:18

2 Answers2

1

You have to use window.getComputedStyle(x) to get the value from the CSS

function dropFunction() {
   var x = document.getElementById("dropdownList")
   if (window.getComputedStyle(x).display === "none") {
       x.style.display = "block"
   } else {
       x.style.display = "none"
   }
}
#dropdownList {
    display:none;
}
<div class="dropdown">
                    <button onclick = "dropFunction()" class="drop-btn">Menu</button>
                    <div id="dropdownList">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                    </div>
                    </div>
dave
  • 62,300
  • 5
  • 72
  • 93
0

You can use 2 solutions.

1.

if(x.style.display === "none")

=>

if(window.getComputedStyle(x).display === "none")

or

2.

<div id="dropdownList">

=>

<div id="dropdownList" style="display: none;">

function dropFunction() {
   var x = document.getElementById("dropdownList")
   if (window.getComputedStyle(x).display === "none") {
       x.style.display = "block"
   } else {
       x.style.display = "none"
   }
}
#dropdownList {
    display:none;
}
<div class="dropdown">
  <button onclick = "dropFunction()" class="drop-btn">Menu</button>
  <div id="dropdownList">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

function dropFunction() {
   var x = document.getElementById("dropdownList")
   if (x.style.display === "none") {
       x.style.display = "block"
   } else {
       x.style.display = "none"
   }
}
#dropdownList {
    display:none;
}
<div class="dropdown">
  <button onclick = "dropFunction()" class="drop-btn">Menu</button>
  <div id="dropdownList" style="display:none;">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
ggrn124
  • 81
  • 3