JavaScript <a> href replacing is not working

Question

I'm making a font download resource website, and this is my JS and some of my html:

 var element, text, font, download, value; function tick() { element = document.getElementById("text"); font = document.getElementById("fontfamily"); text = document.getElementById("dummy-text"); download = document.getElementById("downlink"); text.innerHTML = element.value; text.style.fontFamily = font.value; value = font.value + ".tff"; download.setAttribute("href", value); }

 <input type="text" id="text" value="Lorem ipsum dolor set amit."> <select id="fontfamily"> <optgroup label="Apple"> <option>Helvetica Neue</option> </optgroup> <optgroup label="Google"> <option>Roboto Regular</option> <option>Roboto Light</option> <option>Roboto Bold</option> <option>Roboto Italic</option> </optgroup> <optgroup label="Monotype"> <option>Century Gothic</option> </optgroup> <optgroup label="Nintendo"> <option>Wii Sans Regular</option> <option value="SMW">Super Mario World Sans</option> </optgroup> </select><button onclick="tick()">Set Text</button> <br><br> <h1 id="dummy-text" style="font-family: Helvetica Neue;">Lorem ipsum dolor set amit.</h1><a href="Helvetica Neue.ttf" id="downlink"><button style="margin: 0;">Download</button></a>

but when I press "Download", the link I went to was [object%20HTMLSelectElement].tff, which obviously does not exist.

Any help?

Answer 1

The problem that you have at the moment, is that you are setting an attribute, not setting the href. To set your href do

let download = document.getElementById("downlink");
download.href = "https://example.com";

and that should fix it!

Note: I noticed you're a new member! First of all, welcome to StackOverflow. Second of all, be sure to mark the answer of your questions by clicking the check next to the answer that helped you solve it so people know this question got it's answer and someone new can also find it easily!

Answer 2

After running the snippet I see that even if it is setting the correct value to href , it is getting URL encoded when you click on the Download button.

And that's how Roboto Regular will become Roboto%20Regular .

Add download attribute to <a> tag to specify that the target will be downloaded when a user clicks on the hyperlink.

 var element, text, font, download, value; function tick() { element = document.getElementById("text"); font = document.getElementById("fontfamily"); text = document.getElementById("dummy-text"); download = document.getElementById("downlink"); text.innerHTML = element.value; text.style.fontFamily = font.value; value = font.value + ".tff"; download.href = value; }

 <input type="text" id="text" value="Lorem ipsum dolor set amit."> <select id="fontfamily"> <optgroup label="Apple"> <option>Helvetica Neue</option> </optgroup> <optgroup label="Google"> <option>Roboto Regular</option> <option>Roboto Light</option> <option>Roboto Bold</option> <option>Roboto Italic</option> </optgroup> <optgroup label="Monotype"> <option>Century Gothic</option> </optgroup> <optgroup label="Nintendo"> <option>Wii Sans Regular</option> <option value="SMW">Super Mario World Sans</option> </optgroup> </select><button onclick="tick()">Set Text</button> <br><br> <h1 id="dummy-text" style="font-family: Helvetica Neue;">Lorem ipsum dolor set amit.</h1><a href="Helvetica Neue.ttf" id="downlink"><button style="margin: 0;" download>Download</button></a>