click dropdown not working

Question

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;
}

What errors are you getting in the browser's console? Also you're missing `document` in front of `getElementById("kopceddown")` — j08691, Dec 04 '16 at 16:33
Check this link:-http://www.w3schools.com/howto/howto_js_dropdown.asp — Razia sultana, Dec 04 '16 at 16:57

ca1c · Answer 1 · 2016-12-04T16:38:18.533

4

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.

edited Dec 04 '16 at 16:38

answered Dec 04 '16 at 16:32

ca1c

1,111
10
23

It is a lot easier without js – ca1c Dec 04 '16 at 16:35
Wrong.. the reason to use `li` over regular dropdown is to have uniform UI in all browsers ... – Rajshekar Reddy Dec 04 '16 at 17:11
@RajshekarReddy Its not wrong, it's just another method in which to do it. – ca1c Oct 23 '18 at 18:04

score 0 · Answer 2 · answered Dec 04 '16 at 16:33

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');

}

Slonski · Answer 3 · 2016-12-04T17:08:22.177

0

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

edited Dec 04 '16 at 17:08

answered Dec 04 '16 at 16:51

Slonski

824
5
12

1

I'd argue the use of the triple equals comparison operator `===` http://stackoverflow.com/a/359509/6008014 – Punit Dec 04 '16 at 17:00

Punit · Accepted Answer · 2016-12-04T17:02:54.633

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>

OK, It works now but when i load it first i need to click 2 times and then it will start working — Popivanov, Dec 04 '16 at 17:42
You need to set the style attribute on your mobddown element, i.e. `
`, and not in the CSS. This is because when you access an element's style property in javascript, you're accessing the element's inline style attribute. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style — Punit, Dec 04 '16 at 17:47

click dropdown not working

4 Answers4