We are getting the source of the image by calling the getAttribute() method with src string as a parameter on the img element and storing it in the imagePath variable.

We have attached the click event listener to the button element.

We have selected two elements button and img using the document.querySelector() method and stored them in btnDownload and img variables respectively.

We have also included our javascript file script.js with a script tag at the bottom.

We have included with a script and that will take care of downloading part.

We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.

You can change it to a different URL of your choice.

We are using an external image as a source with an img tag.

The inner text for the button element is “Download”.

The div element is just a wrapper for the rest of the elements.

We have 3 elements in the HTML file ( div, button, and img).

I tested this on Firefox, Safari, and Chrome. When I changed the path to an absolute path, then the browser opened it in a new tab. However, Button 2 only downloaded the file if the path was relative. However, Button 1 would download the file for file types that it couldn't open itself (for example.

Button 1 opened the text file in a new browser tab.

I made two buttons to test it out using two different methods: I noticed there were comments under a lot of the answers that said the browser would just try to open the file itself rather than downloading it depending on the file type. my_file.txt is the name you want the file to be called when it is downloaded./assets/hello.txt is just a relative path on my site.In my testing the following works for all file types and browsers as long as you use a relative link: Download 2

Javascript download file on click