Jump to content
#StayAtHome ×
SaranacLake

Click on LI and perform an action

Recommended Posts

Hello.  I don't know Javascript but could use some help figuring out how to do something simple.

I have an unordered list <UL> and when a user clicks on a given list item <LI> I would like Javascript to perform a task for me.

How would I do that?

Share this post


Link to post
Share on other sites

Set up a listener in a JavaScript file that's included in the HTML page. How this happens depends on what JavaScript framework or library you're using - if any, because that's different, too - but basically you want to set up a general onclick() listener for your element(s); give each clickable element (the <li> elements in your case) a unique selection attribute so you know specifically which one has been clicked. You can give them all different id attributes or use data-* attributes - whatever is easiest for you works, however I recommend being consistent so as to avoid confusion in the future.

Share this post


Link to post
Share on other sites

Using jQuery (recommended):

jQuery(function($){
    $('#yourUL > li').click(function(){
        console.log('LI clicked!');
    });
});
<ul id="yourUL">
  <li>Hello</li>
  <li>World</li>
</ul>

If you don't want to use jQuery then it's more complicated.  Use functions like addEventListener and querySelectorAll.

 

Share this post


Link to post
Share on other sites
8 hours ago, kicken said:

Using jQuery (recommended):

If you don't want to use jQuery then it's more complicated.  Use functions like addEventListener and querySelectorAll.

How do I use jQuery?

I am trying to keep this as simple as possible and not have to include a bunch of libraries and frameworks.  (Especially since I'm not sure how they could get added to the webserver I am using.)

Would think that using pure Javascript would only be a few lines of code.

Again, I have no clue of how Javascript works or how to incorporate it.

Edited by SaranacLake

Share this post


Link to post
Share on other sites
6 hours ago, SaranacLake said:

How do I use jQuery?

I pretty much gave you the code already.  All you need to do is include the jQuery library in your pages and you can learn how to do that by clicking the link I provided.

6 hours ago, SaranacLake said:

Would think that using pure Javascript would only be a few lines of code.

You'd be incorrect.  Pure native Javascript solutions to many things are often either messy or long-winded (less so now than years ago, but still...), that's why libraries like jQuery have been created to make common tasks more concise.  If you want a native solution, again click the links I gave you and do some reading.

6 hours ago, SaranacLake said:

Again, I have no clue of how Javascript works or how to incorporate it.

Then you have something to learn.  We're here to guide, not give you all the answers.  I've given you some sample code and links to learn more.  Go learn.

Share this post


Link to post
Share on other sites
13 hours ago, SaranacLake said:

Would think that using pure Javascript would only be a few lines of code.

I don't mean to sound like an ass by saying this, but that is adorable.

With the current updates in esNext (whatever year it's on now) you can seriously cut down on the number of lines of code you have to write, but you also seriously erode the readability of the code if you're not careful. Either way, with or without a framework, kicken's code is the least amount code you can expect to write - if you want it to do anything other than announce the fact that you've clicked something, it's going to take more thought - and code - from you.

Edited by maxxd

Share this post


Link to post
Share on other sites

If you want raw JS:

place an id on your <li> Lets say id='myJS' and:

	document.getElementById("myJS").addEventListener("click", function(){
  Put your code here between the curly brackets
});
	

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.