I'm currently developing a basic webpage that has a feature allowing users to download the final result as an image file in the last step.
To achieve this, I've added a hidden HTML button for downloading the result image and used CSS to set its display property to None. Then, with a simple JavaScript program, I changed the visibility of the button from None to block.
Here is what my code looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
#down_button
{
display: none;
}
</style>
</head>
<body>
<h1>Press the button to start downloading</h1>
<input type="button" id="down_button" value="Download noww !" >
<script src="testing.js"></script>
</body>
</html>
My JavaScript file contains the following code:
const btn = document.getElementById('down_button');
down_button.style.display='block'; //displays the button
Additionally, I am looking for a way to link a URL to the button so that when a user clicks on it, the download will automatically start in their browser. Can this be done using vanilla JS?
Please provide an explanation with pure JavaScript.