title: Simulating click event on input - JavaScript
body: <p>I'm trying to simulate a click on an input tag, through the click on an <code>anchor</code> tag, this way I can hide the input and wrap an image inside the anchor tag.</p>
  
  <p>This works using the jQuery trigger function, but I can't make it work with just "plain" Javascript:</p>
  
  <p>jQuery version:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let fake = $('.fake')
  fake.click(function(e) {
    e.preventDefault();
    $('#user_avatar').trigger('click');
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#user_avatar { display: none; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;input type="file" name="file_field" id="user_avatar"&gt;
  &lt;a href="#" class="fake"&gt;
    &lt;img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240"&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The JavaScript version using <code>new Event</code> and <code>dispatchEvent</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let fake = document.querySelector('.fake');
  fake.addEventListener('click', function(e) {
    e.preventDefault();
    console.log('testing');
    let clickEvent = new Event('click');
  document.getElementById('user_avatar').dispatchEvent(clickEvent)
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#user_avatar { display: none; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="file" name="file_field" id="user_avatar"&gt;
  &lt;a href="#" class="fake"&gt;
    &lt;img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240"&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The console.log is rendered, but the event isn't being dispatched, what am I doing wrong?</p>