CODEWITHSUNDEEP
javascriptonclickevent-listener
Scott
Scott

Reputation: 13

Handle multiple actions with one button

Button element calls popup menu including images, this works correctly. I have been trying to create a second event listener to change the style to display:none after the second click of the same button. Every combination I try seems to either disable or cancel out the work I have already done. I am new to Javascript and would greatly appreciate the help.

<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width;" />
<link href="scripts/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
    window.onload = function(n) {
        document.getElementById('menubutton').addEventListener("click", function({
            document.getElementById("mainmenu").style.display="block";}, false);
        }
</script>

</head>

<div align="center"><IMG SRC="images/m.index.png" WIDTH=640 HEIGHT=125></div>
<div align="center "id="menubutton"><img src="images/m.icon1.png">Main Menu</div>
<div id="mainmenu" style="display:none">
    <div class="row1">
        <a href='m.page1.html'><IMG SRC="images/m.icon2.png">Sub Menu 1</a>
    </div> 
    <div class="row2">
        <a href='m.page2.html'><IMG SRC="images/m.icon3.png">Sub Menu 2</a>
    </div> 
    <div class="row3">
        <a href='m.page3.html'><IMG SRC="images/m.icon4.png">Sub Menu 3</a>
    </div> 
</div>
</body>
</html>

Upvotes: 1

Views: 4267

Answers (2)

cocco
cocco

Reputation: 16706

your talking about a toggle function in your case 

var toggle=function(){
 var menu=document.getElementById("mainmenu");
 menu.style.display=(menu.style.display=='none'?'block':'none');
}
window.onload=function(){
document.getElementById('menubutton').addEventListener("click",toggle,false);
}

as u can see no need to use jquery, and writing the function properly its also a 'one line' function. it's also much faster than jquery. also the function suggested by jens calls 3 times getelementbyid...and it's missing var on the first getelementbyid

but i use the modern way.

//css
#mainmenu{
 transition:all 700ms ease;
 /*-webkit,-moz,-ms,-o*/
 opacity:0;
}
#mainmenu.show{
 opacity:1;
}

//js
var toggle=function(){
document.getElementById("mainmenu").classList.toggle('show');
}
window.onload=function(){
document.getElementById('menubutton').addEventListener("click",toggle,false);
}

in the second case i change the opacity so that it fades in and out with a easing function in 700milliseconds

why?

1.animation

2.easy to change the animation function in the css without touching the js code (opacity,height,transform... whatever)

3.works on all modern browsers

4.display none slows down the browser as it renders the menu everytime.

a better approach using the 1st case is to use height:0px;overflow:hidden; or margin-top:-999999px; in the css as it just hides or moves it around with no need to rerender the menu

Upvotes: 0

Jens
Jens

Reputation: 2075

You do not need a second listener. Just use the one you have to check, if the menu is visible or not:

document.getElementById('menubutton').addEventListener("click", function()
    {
        menu = document.getElementById("mainmenu");
        if (menu.style.display == "none") {
            document.getElementById("mainmenu").style.display="block";
        } else {
            document.getElementById("mainmenu").style.display="none";
        }
    }, false);

See this jsfiddle.

You could also use jquery, which makes live a bit easier. Then you would have:

$('#mainmenu').click(function() { $('#mainmenu').toggle() });

Upvotes: 2

Related Questions