CODEWITHSUNDEEP
javascripthtml
newkiid
newkiid

Reputation: 21

How to link javascript function to button?

I am new to coding and am trying to figure out how to link a javascript function to an HTML button. I am trying to create a YouTube to MP3 converter for personal use. I am using the npm install youtube-mp3-downloader --save library. Below is the code:

var YoutubeMp3Downloader = require("youtube-mp3-downloader");

//Configure YoutubeMp3Downloader with your settings
var YD = new YoutubeMp3Downloader({
  "ffmpegPath": "/usr/local/bin/ffmpeg", // FFmpeg binary location
  "outputPath": "*output path*", // Output file location (default: the home directory)
  "youtubeVideoQuality": "highestaudio", // Desired video quality (default: highestaudio)
  "queueParallelism": 2, // Download parallelism (default: 1)
  "progressTimeout": 2000, // Interval in ms for the progress reports (default: 1000)
  "allowWebm": false // Enable download from WebM sources (default: false)
});

//Download video and save as MP3 file
YD.download("jNQXAC9IVRw");

YD.on("finished", function(err, data) {
  console.log(JSON.stringify(data));
});

YD.on("error", function(error) {
  console.log(error);
});

YD.on("progress", function(progress) {
  console.log(JSON.stringify(progress));
});
<h1 class="heading">YouTube Downloader</h1>
<input class="URL-input" placeholder="Paste the letters between = and & of YouTube URL">
<button class="YD.download(jNQXAC9IVRw)">Convert</button>

I am trying to link the YD.download function to the convert button. Any suggestions would be appreciated. Thank you.

Upvotes: 1

Views: 147

Answers (3)

bluevulture
bluevulture

Reputation: 412

There are two ways really:

  • add an onclick attribute:

    <button onclick="myFunction()">Click me</button>

  • add an event listener:

    document.getElementById("myBtn").addEventListener("click", displayDate);

But in order for the last one to work you need to add an id tag to the <button>, also the class attribute is intended to identify an element as a part of a class (for CSS, javascript), not for calling JS functions.

As @Quentin has mentioned, your function won't really work, so you should find a different solution, if you wish to use JS.

Upvotes: 0

Habib Mhamadi
Habib Mhamadi

Reputation: 769

you can your function to the onclick attribute of your button.

<button onclick="YD.download('jNQXAC9IVRw')" >download</button>

Upvotes: 0

Quentin
Quentin

Reputation: 943547

Typically you would use addEventListener to connect an event listener function to the click event of the button.

However, the library you have found will not run in a web browser. It is designed for use with Node.js and depends on APIs that are provided by Node.js and not by web browsers (such as the ability to execute programs like ffmpeg and write files to the disk).

If you want to connect it to a webpage then you'll need to create a web service (you can create a web server in Node.js using the Express.js library) and then trigger it with an HTTP request (e.g. by submitting a <form> to the URL in your web service that triggers this code).

Upvotes: 3

Related Questions