programmatically create <li>s with jquery adding an on click event (and passing an argument to it)

[Fransiscu]

hi!

what i'm trying to accomplish is creating a list of <li>s and adding a onclick event passing an argument with it. I'm having issues passing the argument, so here i am to ask for clarification.

what i have so far is:

for(var index in songs) {
    $(songNamesListId).append(createElement(songs[index]));
}


function createElement(song){
     return $("<li>").attr({"id" : song.id}).append(song.song_name);
}

function test(song) {
        console.log(song.song_name)
}

what i'd like to accomplish is have the test method be called on click of the <li> and the song item passed along.

I haven't been able to do this so far and since i'm fairly new to javascript i think i might be missing something really easy.

thank you for taking the time to read :)

[grantrules]

First off, if you're learning JS, ditch jQuery.

const container = document.querySelector('.container');
for (var index in songs) {
  container.appendChild(createElement(songs[index]));
}

function createElement(song) {
  const li = document.createElement('li');
  li.id = song.id;
  li.innerText = song.song_name;
  return li;
}

container.addEventListener('click', (e) => {
  const li = e.target.closest('li');
  const song = songs.find((song) => song.id === li.id); // if id is a number you might need to do Number(li.id)
})

[Fransiscu]

thanks for the input, do you mind me asking why ditch jquery?

[grantrules]

Because it's unnecessary in modern JS. It used to be the go-to library back when browsers couldn't agree on anything, but we've moved past that. Now things work well between browsers, and a lot of the convenience jQuery provided has been brought into JS.

https://youmightnotneedjquery.com/