title: How to bind URL to the HTML hidden button which is dynamically shown by Javascript program
body: <p>I am working in a simple webpage that requires to download the result as image file in the last step.</p>
  <p>I have created a hidden HTML button for downloading result image and set its display to None by CSS. Now I have changed it's visibility from <code>None</code> to <code>block</code> using a simple JavaScript program.</p>
  <p>My program looks something like this:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot; /&gt;
  &lt;style&gt;
      #down_button
      {
          display: none;
      }
  &lt;/style&gt;
  &lt;/head&gt;
   &lt;body&gt;
    &lt;h1&gt;Press the button to start downloading&lt;/h1&gt;
     &lt;input type=&quot;button&quot; id=&quot;down_button&quot; value=&quot;Download noww !&quot; &gt;
      &lt;script src=&quot;testing.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>and my JS file looks like this:</p>
  <pre><code>const btn = document.getElementById('down_button');
  
  down_button.style.display='block'; //displays the button
  </code></pre>
  <p>Is it possible to bind a URL with the button such that whenever a user press the button; the downloading will start in to the browser</p>
  <p>Please explain with vanilla JS.</p>