How to make a li have an onclick, Making lis have onclick. Options

[MongooseHugger]

My top menu, as my text almost fits the size of the li, there isn't much of an issue. However, on my side menus, my li text only takes up, usually, about half the size of the li. I was trying to add onclick() to the li that would basically do what the a href in the li did, but it didn't work.

So, is there a way to use JS or something to add an onclick to each of the lis that would do what the a hrefs inside of them do?

[pandy]

Maybe the LI is covered by something else (an invisible part of). We need to see what you have to be able to say what the problem is. Can you link to a sample page?

It sound like you think there's a trick with using onclick with LI. There isn't. It works just as you would expect it to. So there must be something in your page that stops that.

[MongooseHugger]

I kind of feel dumb (but it was 1 in the morning when I tried it earlier.) I had onclick set as a URL, which explains why it WASN'T working. However, while I could simply write loads of functions, each calling up a new page like the a href would do with the a, can you simply just pass the URL as a string to a function (hence only needing 1 function instead of several) or will it convert it wrong if you do that?

Due to the way I set up the page, I have been using php and the echo function (though I probably don't need to)

(Note, due to layout issues, right now I have my li things in a table.)

The code that I'm interested in is below.

echo "<tr><td><li onclick='changePage()'><a href='./findus.php'> Find Us</a></li></td></tr>";


<script>
function changePage()
{

window.location.href= "./findus.php";

}
</script>

(Note, it doesn't go like that, the syntax is fine as I had the script outside the PHP tags.)



What I'm confused on is how I would pass ./findus.php to the function so I could use it rather than having to manually write it (this would allow me to use one function over and over rather than write a whole bunch of new ones for every URL.) If I just put ./findus.php though, it doesn't work. Also, I'm still trying to figure out how I could put ' ' around the ./findus.php without breaking the php code. I tried a few things but nothing is working yet.




This post has been edited by MongooseHugger: Aug 11 2016, 11:58 PM

[Christian J]

Looks like you want the link to fill the entire LI element? Then the simplest solution might be to just make the link "display: block" with CSS. No need to make the LI clickable.

can you simply just pass the URL as a string to a function (hence only needing 1 function instead of several)

Yes, IIRC it's called a "parameter" in the function call:

CODE

onclick="changePage('foo.html');"

and an "argument" in the actual function:

CODE

function changePage(clicked_li)
{
    window.location.href=clicked_li;
}

But if the URL is always the same as in the link, you might instead pull it from the link automatically:

CODE

onclick="changePage(this);"

(where "this" above is the clicked LI element).

CODE

function changePage(clicked_li)
{    
    // href of first link inside clicked LI
    window.location.href=clicked_li.getElementsByTagName('a')[0].getAttribute('href');
}

However, if you're creating the above javascript with PHP you may indeed get problems with nested quotes. Perhaps you could escape the nested quotes with backslashes, or rewrite the PHP so you don't need to echo these parts. See also http://php.net/manual/en/language.types.string.php

[MongooseHugger]

You just gave me an idea that I hadn't even thought of earlier. I could use an event listener for when the li is clicked. It would then check inside the li for an a tag and get the href from that. (There will always only be one a tag inside of the li, except for the rare case when the li is actually a menu itself with a sub menu, at which point I can just call the function that the a calls with onclick.

This code would actually be cleaner than the one I had thought of earlier when I thought of using an array of inks and just passing the function a number to get the index of the array to get the url.

[Christian J]

You just gave me an idea that I hadn't even thought of earlier. I could use an event listener for when the li is clicked. It would then check inside the li for an a tag and get the href from that.

Yes that should work too. But the CSS idea should be the simplest of them all, so try that first.

[MongooseHugger]

Another idea would just to be to use event.target. However, does that return the element name only or the element itself?


If I used event.target, then how do I get the a element inside of it?


Say that event.target returns an li element and the li element has an a element inside of it and I want to get the href of that a element and then use that href to change the page (by creating the same effect as clinking the link would be.)

I have thought window.event.srcElement or event.target but so far, these don't quite seem to work.

I tried

var item = element.target;

var link = item.querySelectorAll"a")[0];

But it doesn't seem to like it.

[Christian J]

Another idea would just to be to use event.target. However, does that return the element name only or the element itself?

The element itself.

If I used event.target, then how do I get the a element inside of it?

event.target seems to return the clicked element deepest in the node tree, so if you click a link in the LI, the link's A element is returned. This happens even if you loop through list items:

CODE

<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
</ul>

function foo(e)
{
    alert(e.target.nodeName); // alerts "A"
}

var li=document.getElementsByTagName('li');
for(var i=0; i<li.length; i++)
{
    li[i].addEventListener('click', foo, false);
}

In other words, clicking an LI above just calls function foo(), but in that function e.target refers to the clicked element deepest in the node tree (A in this case) --not the clicked LI-- just like if you used:

CODE

window.addEventListener('click', foo, false);

Use the CSS solution instead.