CODEWITHSUNDEEP
javascripthtmlcss
Popivanov
Popivanov

Reputation: 15

click dropdown not working

I am trying to make clickable dropdown but it doesn't work. This is my code, I saw this code from another question i did everything and still not working. Can someone help?

HTML CODE:

<li class = "mobmeni">
  <div class = "mobmenidiv">
    <button id="kopceddown" class="mobmenikopce"></button>
  </div>
</li>

<div id = "mobddown">
  <li><a href="#">Берово</a></li>
  <li><a href="#">Берово</a></li>
  <li><a href="#">Берово</a></li>
  <li><a href="#">Берово</a></li>
</div>

SCRIPT:

    function show_or_hide()
    {
      if(getElementById("mobddown").style.display="none")
        getElementById("mobddown").style.display="block";
      else 
        getElementById("mobddown").style.display="none";
    }

    getElementById("kopceddown").addEventListener("click", show_or_hide);

CSS:

#mobddown{
    font-size: 2em;
    display: none;
}

#mobddown li{
    display: block;
    margin: 0;
    padding: 0.4em;
}

#mobddown li a{
    text-decoration: none;
    color: black;
}

#mobddown li:hover{
    background-color: #35aa96;
}

Upvotes: 0

Views: 281

Answers (4)

Slonski
Slonski

Reputation: 834

First of all, you need 'document' before getElementById

document.getElementById(id);

Then you have to use '===' in the if condition

function show_or_hide()
    {
      var ddown = document.getElementById("mobddown");
      if(ddown.style.display === "block")
        ddown.style.display = "none";
      else 
        ddown.style.display = "block";
    }

document.getElementById("kopceddown").addEventListener("click", show_or_hide);

Here's working example

Upvotes: 0

Punit
Punit

Reputation: 1976

The condition in your if statement needs to use the equality comparison operator ===, not the assignment operator =.

So it should be getElementById("mobddown").style.display === "none"

...and not getElementById("mobddown").style.display = "none".

Also, you should be using document.getElementById(), and your <li> elements should be inside a list element (<ul> or <ol>).

Here is a snippet of your code working:

function show_or_hide() {
  if (document.getElementById("mobddown").style.display === "none") {
    document.getElementById("mobddown").style.display = "block";
  } else {
    document.getElementById("mobddown").style.display = "none";
  }
}

document.getElementById("kopceddown").addEventListener("click", show_or_hide);
<ul>
  <li class="mobmeni">
    <div class="mobmenidiv">
      <button id="kopceddown" class="mobmenikopce"></button>
    </div>
  </li>
</ul>
<ul id="mobddown" style="display: none;">
  <li><a href="#">Берово</a>
  </li>
  <li><a href="#">Берово</a>
  </li>
  <li><a href="#">Берово</a>
  </li>
  <li><a href="#">Берово</a>
  </li>
</ul>

Upvotes: 0

ca1c
ca1c

Reputation: 1295

It may be better just to use a simple <select> tag:

<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

You may add css to this later if you like.

Upvotes: 4

Kangjun Heo
Kangjun Heo

Reputation: 1081

use setAttribute() and getAttribute() alternatively.

example:

function show_or_hide()
{
   if(document.getElementById("mobddown").getAttribute('style')=='display:none') 
       document.getElementById('mobddown').setAttribute('style', 'display:block');
   else document.getElementById("mobddown").setAttribute('style', 'display:none');

}

Upvotes: 0

Related Questions