li元素上的JavaScript“ onClick”

Question

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 : )

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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