Reputation: 15
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
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);
Upvotes: 0
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
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
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