SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    310
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    What is the javascript equal $('#myUL li')

    I want to write the whole file in pure java script, but this part:
    Code:
    $('#myUL li')
    When I try:
    Code:
    document.querySelectorAll('#myUL li').addEventListener("click", function() {
       // code to be executed
    });
    The console.log report:
    Code:
    Uncaught TypeError: Object #<NodeList> has no method 'addEventListener'
    Thank you

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi ketting00,

    As your error message suggests, document.querySelectorAll returns a NodeList and you cannot attach an event listener to a node list.
    Instead, you will need to loop through the NodeList and attach the listener to the nodes it contains.

    E.g.

    Code JavaScript:
    var myLis = document.querySelectorAll('#myUL li');
    for (var i=0, len = myLis.length; i<len; i++){
      myLis[i].addEventListener("click", function() {
        console.log("hi");
      });
    }

    HTH

  3. #3
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    310
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thanks. It works.

  4. #4
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    310
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Hello, I've a question again.
    How do I get ID from the li clicked. Here's my experiment so far:
    Code:
    <ul id="myUL">
    	<li>Song1</li>
    	<li>Song2</li>
    	<li>Song3</li>
    	<li>Song4</li>
    	<li>Song5</li>
    </ul>
    This is easy with jQuery:
    Code:
    tracks = [
    	{"track":1,"name":"Song1","length":"00:55","file":"Song1"},
    	{"track":2,"name":"Song2","length":"00:37","file":"Song2"},
    	{"track":3,"name":"Song3","length":"01:05","file":"Song3"},
    	{"track":4,"name":"Song4","length":"00:40","file":"Song4"},
    	{"track":5,"name":"Song5","length":"00:59","file":"Song5"}
    ];
    
    li = $('#myUL li').click(function() {
    	var id = parseInt($(this).index());
    	audio.src = path + tracks[id].file + extension;
    	console.log(id);
    });
    I want it to be something like this:
    Code:
    for (var i=0, len = myLis.length; i<len; i++){
    	myLis[i].addEventListener("click", function() {
    		console.log(WHATEVER THAT GET ME THE ID);
    		parseInt(myLis[i]); // This is not working
    	});
    }
    Thank you

  5. #5
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,256
    Mentioned
    32 Post(s)
    Tagged
    4 Thread(s)
    This is the 'closure within a loop' problem that seems to be quite common. The event handlers don't get executed until after the loop has finished, so the value of i is not the same as it is when you add the event listener.

    One solution to the problem is to do something like this:
    Code JavaScript:
    for (var i=0, len = myLis.length; i<len; i++){
        (function(id){
            myLis[id].addEventListener("click", function() {
                audio.src = path + tracks[id].file + extension;
            });
        })(i);
    }

    What I've done here is to wrap the code which adds the listener in an anonymous function, which is immediately called and passed the current value of i (which the function receives as the argument index). This creates a closure which 'traps' the correct value of i.

    Edit: Note that it's not necessary to call parseInt on i, as it's already an integer.

  6. #6
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    310
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thanks,
    It works like a charm.
    This is the first time ever I encounter something like this.

    This make me realized that there are much more to learn about javascript. It's amazing.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •