Simulating click event on input - JavaScript

Question

I\'m trying to simulate a click on an input tag, through the click on an anchor tag, this way I can hide the input and wrap an image inside the anchor tag.

Answer 1

Use:

document.getElementById('user_avatar').click();

Tested and it works.

Answer 2

You don't need JavaScript at all to solve this problem.

Just make the input invisible by setting its opacity:0 and position both elements absolutely within a common parent element, then make sure the input is on the top layer and is the same size as the image behind it.

#user_avatar { opacity:0; position:absolute; z-index:9; width:320px; height:240px; }
img { position:absolute; z-index:-1; }

<div>
  <input type="file" name="file_field" id="user_avatar">
  <img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240">
</div>

Answer 3

document.getElementById('user_avatar').click() will work

let fake = document.querySelector('.fake');
fake.addEventListener('click', function(e) {
  e.preventDefault();
  document.getElementById('user_avatar').click()
})

#user_avatar {
  display: none;
}

<input type="file" name="file_field" id="user_avatar">
<a href="#" class="fake">
  <img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240">
</a>