CODEWITHSUNDEEP
javascripthtmlcss
Snorlax
Snorlax

Reputation: 4765

Javascript: Selecting List from UL

var ul = document.getElementById("parent-list");
document.querySelectorAll("#parent-list li").onclick = function() {

  alert('click!');

}
<ul id="parent-list">
  <li id="item-1">Item 1</li>
  <li id="item-2">Item 2</li>
  <li id="item-3">Item 3</li>
  <li id="item-4">Item 4</li>
  <li id="item-5">Item 5</li>
  <li id="item-6">Item 6</li>
  <li id="item-7">Item 7</li>
  <li id="item-8">Item 8</li>
  <li id="item-9">Item 9</li>
</ul>

I'm trying to have an alert popup of the item clicked when I click on a "li" element with javascript only. I know how to do in jquery but I can't figure out how to do it with javascript.

fiddle: https://jsfiddle.net/7jcksznz/1/

Upvotes: 0

Views: 57

Answers (4)

Brian Peacock
Brian Peacock

Reputation: 1849

Use an event-listener targeted on each element rather than directly assigning an onclick function to a NamedNodeMap.

/* get an array of list items */
var items = Array.prototype.slice.call(
      document.querySelectorAll('li[id|="item"]')
);

/* add event-listener to each item */
items.forEach(function(item) {
    item.addEventListener('click', clickAlert, false);
});

/* click function */
function clickAlert(evt) {
    alert(evt.target.id +' clicked!');
}

See:

Upvotes: 0

Aya Salama
Aya Salama

Reputation: 1518

querySelectAll returns array of nodes. you have to iterate over the nodes to add the event listner.

var ul = document.getElementById("parent-list");
var li_items = document.querySelectorAll("#parent-list li");
for (var i = 0 ; i < li_items.length ; i++)
    li_items[i].onclick = function (){alert(this.id);}

Upvotes: 0

遁地龙卷风
遁地龙卷风

Reputation: 40

document.querySelectorAll("#parent-list li") get a collection of HTMLElement,so,you can do like this：
window.onload = function()
    {
        var ul = document.getElementById("parent-list");

        ul.onclick = function(e)
        {
            if(e.target.tagName = "LI")
            {
                alert(1);
            }
        }

    }

Upvotes: 0

epascarello
epascarello

Reputation: 207557

querySelectorAll returns an HTML collection. You would need to attach the event to each one. You would need to loop over the collection. 

var lis = document.querySelectorAll("#test li");
for (var i = 0; i < lis.length; i++) {
  lis[i].addEventListener("click", function() {
    console.log(this.innerHTML);
  });
}
<ul id="test">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

A better option is to add one click on the UL and use the event to determine which li was clicked. 

document.getElementById("test").addEventListener("click", function(event) {
  var li = event.target;
  console.log(li.innerHTML);
});
<ul id="test">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Upvotes: 3

Related Questions