Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hey there.
I've got a music player in which I can download audio files by linking the href directly to a click function. Each audio file is in a li element and everything works fine as long as I keep it hardcoded. But the moment that I convert the li elements and the link for download to dynamic, I can't connect the click function anymore. Can anyone help? Here's the code:

What I have tried:

// Html hardcoded

<ul id="playlist1" class="hidden m-1 p-0">
<li id="li-items" data-song="the-deal.wav">The Deal</li>
<li id="li-items" data-song="rise-of-don.mp3">Rise of The Don</li>
</ul>



// Audio Library js

var data1 = [{
          href: "/media/the-deal.wav",
          name: "The Deal",
          song: "the-deal.wav"
      }, {
          href: "/media/rise-of-don.mp3",
          name: "Rise of the Don",
          song: "rise-of-don.mp3"
      }]


// Create li elements
            for (var i = 0; i < data1.length; i++) {
                var t = document.createElement('li');
               t.setAttribute("onclick","myFunction()");
               t.setAttribute("id","li-items");
               
               
                var ta = document.createElement('span');
                ta.classList.add("dwn","fa","fa-download");
                ta.setAttribute("onclick","downloadFile('url','filename')");  // << This is the line that I'm having trouble with. 'Url' and 'filename' should be added dynamically for each li element. 
                
                t.dataset.song = s.song;
                t.textContent = s.name;
                t.appendChild(ta);

                
                document.getElementById('playlist1').appendChild(t);

    }




// Audio Player js - (download function):

function downloadFile(url, filename) {
    //Filename download the user-defined name. The URL is the download address
    var link = document.createElement('a');
    link.href = url;
    link.download = filename;
    link.target = '_blank';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    link = null;
}
If anyone could help, I'd really appreciate it.
Posted
Updated 5-Oct-21 2:28am
v2
Comments
Chris Copeland 5-Oct-21 5:04am    
What seems to be the issue? Is it that the click event isn't being raised, or that you don't understand how to dynamically add the content to the downloadFile() method?

Also, how come you're binding a click event handler to the li element? Does the myFunction() function actually exist?

1 solution

Seems simple enough:
JavaScript
const downloadFile = function(url, filename){
    const link = document.createElement("a");
    link.href = url;
    link.download = filename;
    link.target = "_blank";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    link = null;
};

const data1 = [
    { href: "...", name: "...", song: "..." },
    { href: "...", name: "...", song: "..." }
];

const playlist1 = document.getElementById('playlist1');

data1.forEach((item, index) => {
    const li = document.createElement("li");
    li.setAttribute("id", `li-items-${index}`);
    
    const span = document.createElement("span");
    span.classList.add("dwn", "fa", "fa-download");
    span.dataset.song = item.song;
    span.textContent = item.name;
    
    span.addEventListener("click", () => downloadFile(item.href, item.song));
    
    li.appendChild(span);
    playlist1.appendChild(li);
});
Array.prototype.forEach() - JavaScript | MDN[^]
EventTarget.addEventListener() - Web APIs | MDN[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900