How do I add values dynamically to an 'onclick' function?

Question

0.00/5 (No votes)

See more:

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 4-Oct-21 21:33pm

Jopeme 3D

Updated 5-Oct-21 2:28am

CHill60

v2

Add a Solution

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

Add a Solution

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

Richard Deeming · Answer 1 · 2021-10-05T02:28:00

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[^]

How do I add values dynamically to an 'onclick' function?

1 solution

Solution 1

Add your solution here

Preview 0

How do I add values dynamically to an 'onclick' function?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us