html - The Javascript onclick event only fire on the second click -

i have onclick problem. searched internet, people had same problem not explain how fixed problem. cannot figure out goes on here.

i supposed make button called "load new", when clicked showed allow user select file.

html

<input type="button" class="clear-button" onclick="clearb()" value="clear board" /><br /><br /> <input type="button" value="load game board" onclick="loadgame()" /> <input type="button" id="get_file" onclick="n();" value="load new game"> <input type="file" id="my_file"> 

css

#my_file {     display: none; } 

javascript

function n() {     if (document.getelementbyid('get_file') != null) {         document.getelementbyid('get_file').onclick = function() {             document.getelementbyid('my_file').click();         }         //loadgame(); //triggers function without allowing user open file.     } } 

lastly cannot put function manipulate contents of file in function n(). no matter put it, triggers function without opening file-select dialog.

the dialog not visible after first click because first click attaches event handler anonymous function open my_file not execute it.

the second click executes anonymous function since attached. fires click event my_file:

  function showfileupload(){                 document.getelementbyid('get_file').onclick = function() {             document.getelementbyid('my_file').click()         }   } 

this version fires click event my_file

 function showfileupload_2(){ document.getelementbyid('my_file').click()                                 } 

this html

  <input type="button" id="get_file"            onclick="showfileupload_2();" value="load new game">     <input type="file" id="my_file">