Click on LI and perform an action

[SaranacLake]

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?

[maxxd]

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.

[kicken]

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.

 

[SaranacLake]

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 January 12, 2020 by SaranacLake

[kicken]

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.

[maxxd]

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 January 13, 2020 by maxxd

[NotSunfighter]

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