Making each li of a Ul clickable

Question

I have a simple ul list, as can be seen below:

<div class="container">
  <div class="row">
    <div class="col">
      <h1>My Favorite Meals <span>(1)</span></h1>
      <hr>

      <ul>
        <li class="selected">Spaghetti</li>
        <li>Curry &amp; Rice</li>
        <li>Burrito</li>
        <li>Soup</li>
        <li>Something Else</li>
      </ul>
    </div>
  </div>
</div>

What I want to do, is to make this list clickable. So that when you click on one of the Lis, the background color changes, and the selected li will also be assigned a new class.

My JS code isn't working:

var ul = document.getElementById("foo")
var items = ul.getElementsByTagName("li")

for (var i = 0; i < items.length; ++i) {
  // do something with items[i], which is a <li> element
  var current = items[i]
  current.addEventListener("click", onClick)
  var onClick = function() {
    current.style.backgroundColor = "red"
}
}

You need javascript and the dom for this to add CSS classes dynamically. I reccomend you create a js file and write a function that will handle clicks on

score 2 · Answer 1 · answered Oct 04 '20 at 05:13

HTML:

<div class="container">
  <div class="row">
    <div class="col">
      <h1>My Favorite Meals <span>(1)</span></h1>
      <hr>

      <ul>
        <li class="selected"><a href="#">Spaghetti</a></li>
        <li><a href="#">Curry &amp; Rice</a></li>
        <li><a href="#">Burrito</a></li>
        <li><a href="#">Soup</a></li>
        <li><a href="#">Something Else</a></li>
      </ul>
    </div>
  </div>
</div>

CSS:

.backgroundColor {
  background-color: lightgray;
}

JS:

var items = document.getElementsByTagName("li")

items.forEach(li => {
  li.addEventListener('click', () => {
    li.classList.toggle('backgroundColor');
  });
});

Hopefully this will help you to solve your problem.

dwosk · Accepted Answer · 2020-10-04T05:00:20.927

Try something like this:

<div class="container">
  <div class="row">
    <div class="col">
      <h1>My Favorite Meals <span>(1)</span></h1>
      <hr>

      <ul id="list">
        <li class="selected">Spaghetti</li>
        <li>Curry &amp; Rice</li>
        <li>Burrito</li>
        <li>Soup</li>
        <li>Something Else</li>
      </ul>
    </div>
  </div>
</div>

<script>
  document.getElementById("list").addEventListener("click",function(e) {
    if (e.target && e.target.matches("li")) {
      e.target.classList.toggle("foo"); // toggle foo class name here
      e.target.style.backgroundColor = "red"; // new background color here
    }
  });
</script>

I assigned your ul element an id of "list" and added a "click" event listener to it. Whenever you click an li element within that list, it will assign the foo class to that clicked element (click again to unassign). Similarly, assign a red background color to that element.

JavaScript - addEventListener on all created li elements

Thats perfect, but just one question, what If I want to toggle the class name on and off by clicking? — snuffydave, Oct 04 '20 at 04:56
@snuffydoug If dwosk's answer works for you, then you should consider accepting it so that the question gets marked as solved on SO. Each question on SO should be about one specific problem and it is against the guidelines to add more requirements, as it makes it difficult to answer. If you have additional requirements, you can always ask those in a new question and link to this one as a reference. — FluffyKitten, Oct 04 '20 at 05:01

score 1 · Answer 3 · answered Oct 04 '20 at 05:02

I hope my code solved your problem.

$(document).ready(()=>{
  $(".my-list li").each((i)=>{
  var myLi = $($(".my-list li")[i]);
    myLi.bind("click",()=>{
      if(!myLi.hasClass("selected"))
        myLi.addClass("selected")
      else
        myLi.removeClass("selected")
    })
  })
})

.selected{
background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="my-list">
  <li class="selected">Spaghetti</li>
  <li>Curry &amp; Rice</li>
  <li>Burrito</li>
  <li>Soup</li>
  <li>Something Else</li>
</ul>

score 1 · Answer 4 · answered Oct 04 '20 at 05:03

See below. Documentation is inside the code.

// Put a nodelist of li's in variable lis
const lis = document.querySelectorAll("ul li");
// Add an event listener to each li
lis.forEach(li => {
  li.addEventListener("click", () => {
    // Remove class selected from currently selected li
    document.querySelector("ul li.selected").classList.remove("selected");
    // Assign class selected to the clicked li
    li.classList.add("selected");
  });
});

li {
  cursor: pointer; /* Change cursor */
}

li.selected {
  /* Change background color of selected li */
  background-color: lightgreen;
}

<div class="container">
  <div class="row">
    <div class="col">
      <h1>My Favorite Meals <span>(1)</span></h1>
      <hr>
      <ul>
        <li class="selected">Spaghetti</li>
        <li>Curry &amp; Rice</li>
        <li>Burrito</li>
        <li>Soup</li>
        <li>Something Else</li>
      </ul>
    </div>
  </div>
</div>

Making each li of a Ul clickable

4 Answers4