Swap out the <a> tag for an <input type="button"> element that includes a "download" property

Question

I have been working on a simple canvas-to-image exporter. You can find it here.

Currently, it only works with the following code:

<a id="download" download="CanvasDemo.png">Download as image</a>

However, I would like to use something like this instead:

<input id="download" value="Download" download="CanvasDemo.png" onclick="download()">

Unfortunately, when I try this, I receive an error: "Uncaught TypeError: download is not a function".

Is there a way for me to replace the "a" tag with a button?

I apologize if my question seems basic, I am still in the process of learning.

Thank you in advance.

Answer 1

Answer №1

If you absolutely need it to be an input tag and have no further plans for the element, you can disguise it as a hidden <a> tag.

<a id="download" download="CanvasDemo.png" style="display:none"></a>

Then, style the input element to appear however you like:

<input id="input_download" value="Download" onclick="download()">

The download() function will trigger a click on the hidden <a> tag:

function download(){
    var tag=document.getElementById("download");
    tag.click()
}

Answer 2

If you absolutely need it to be an input tag and have no further plans for the element, you can disguise it as a hidden <a> tag.

<a id="download" download="CanvasDemo.png" style="display:none"></a>

Then, style the input element to appear however you like:

<input id="input_download" value="Download" onclick="download()">

The download() function will trigger a click on the hidden <a> tag:

function download(){
    var tag=document.getElementById("download");
    tag.click()
}