Html Button with embedded Javascript

#1

I am trying to make a button force download a PDF, but I can’t figure out how, I am using an onclick function to count the number of times the button was clicked, but I want it to also force download the PDF here is my code:

<script type="text/javascript">
    var clicks = 0;
    function onClick() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
    };
    </script>
        
    <button type="button" onClick="onClick()"> <b>Download Game</b> <p> <b>Downloads: <a id="clicks">0</a> </b> </p>
            </button>

The file I want to download is called The_Game.zip, it currently has nothing in it because I’m trying to see if this is possible.

#2

The best solution would be to use a instead of button.

// html
<a href="PATH_TO_FILE" download class="btn-link">Download File</a>

// css
.btn-link {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  ...
}

Also note, that page and file should be under the same host (domain)

#3

I would suggest adding an event listener to the JavaScript rather than an onClick handler in the HTML.

You should be able to do the following:

<a href="#" download="proposed_file_name">Download</a>
<!--Just Replace the filename with your filename to the file
and you should be good to go-->

Also You may want to look into fixing the HTML, the button encompasses everything to include the amount of times downloaded.

<button type="button" onClick="onClick()">
   <b>Download Game</b><!--Don't need this-->
<!--Place the A tag for the download here-->
</button>

<p> 
  <b>Downloads: <a id="clicks">0</a> </b> 
<!--I would suggest using strong tags instead of the B tag 
and replace the A tag with a simple paragraph tag-->
</p>
#4