CODEWITHSUNDEEP
javascripthtmlcss
ogdabou
ogdabou

Reputation: 592

JavaScript "onClick" on li elements

I made a menu bar with ul and li and I want some onClick events linked to JavaScript functions.

But it does not work, clicking on menus don't do anything at all.

The function is on a JS file I already use and I tested it on another element, it seems that id doesn't work only inside of my li.

Here is the HTML:

<div id="header">
    <div id="titleContainer">
        blablabl
    </div>
    <ul id="menuContainer">
        <li class="menuItem" id="videoMenu">
            <a href="#" onClick="showAbout2();"> Video</a>
        </li>
        <li class="menuItem" id="playlistMenu">
            Playlist
        </li>
        <li class="menuItem" id="aboutMenu">
            About
        </li>
        <li class="menuItem" id="controlsMenu">
            Controls
        </li>
    </ul>
</div>

The CSS:

#titleContainer
{
    box-shadow: 0px 0px 5px #000;
    color: lightgrey;
    font-size: 20px;
    font-weight: bold;
    line-height: 50px;
    text-align: center;
}

#menuContainer
{
    background-color: #333333;
    line-height: 35px;
    margin: 0;
    position: relative;
    text-align: center;
    z-index: -1;
}

#menuContainer li
{
    display: inline;
    list-style: none;
}

The JS:

function showAbout2()
{
    console.log("bonjour");
}

ANSWER:

The answer was :

Removing the z-index.

I wanted to click on a lower-layered element. So i'll try this http://www.vinylfox.com/forwarding-mouse-events-through-layers/

Thanks everyone : )

Upvotes: 1

Views: 52653

Answers (4)

Minuka ArTy Weerathunga
Minuka ArTy Weerathunga

Reputation: 323

You have to Remove the z-index on the id tag #menuContainer. This should work

#menuContainer{
background-color: #333333;
line-height: 35px;
position: relative;
text-align: center;
}

Upvotes: 0

Harry
Harry

Reputation: 89750

Remove the z-index on the #menuContainer. This is pushing the #menuContainer behind and hence is preventing the click event from happening/taking effect.

#menuContainer
{
    background-color: #333333;
    line-height: 35px;
    margin: 0;
    position: relative;
    text-align: center;
    z-index: -1; /*Remove this line.*/
}


function showAbout2() {
    console.log("bonjour");
}
#titleContainer {
    box-shadow: 0px 0px 5px #000;
    color: lightgrey;
    font-size: 20px;
    font-weight: bold;
    line-height: 50px;
    text-align: center;
}
#menuContainer {
    background-color: #333333;
    line-height: 35px;
    margin: 0;
    position: relative;
    text-align: center;
}
#menuContainer li {
    display: inline;
    list-style: none;
}
<div id="header">
    <div id="titleContainer">blablabl</div>
    <ul id="menuContainer">
        <li class="menuItem" id="videoMenu"> <a href="#" onClick="showAbout2();"> Video</a>

        </li>
        <li class="menuItem" id="playlistMenu">Playlist</li>
        <li class="menuItem" id="aboutMenu">About</li>
        <li class="menuItem" id="controlsMenu">Controls</li>
    </ul>
</div>

The below update is not part of the original question but is added based on your comments to the answer.

It seems like removing the z-index: -1 is breaking the box-shadow effect on your website because it is bringing the element back to the front. To overcome this, add the below lines to #titleContainer and #mainContent after removing the item mentioned in the original answer

z-index: 2; 
position: relative;

That will get the shadow back because instead of sending #menuContainer back, we are bringing the other two in front.

Upvotes: 5

John
John

Reputation: 13719

All you need to do is loop through the list-item elements and add event listeners...

 var l = document.getElementById('menuContainer').getElementsByTagName('li');

 for (var i=0; i<l.length; i++)
 {
  l[i].addEventListener('click', function() {alert('add any function in place of this alert!');},false);
 }

If you need something more specific please comment.

Upvotes: 1

thgaskell
thgaskell

Reputation: 13226

Remove z-index: -1, it's preventing you from clicking the link.

http://jsfiddle.net/w4cE3/

CSS

#menuContainer
{
    background-color: #333333;
    line-height: 35px;
    margin: 0;
    position: relative;
    text-align: center;
}

Upvotes: 3

Related Questions