javascript - Javascript onclick 事件仅在第二次点击时触发

Question

我有一个onclick 问题。我在网上搜索了一下，但是遇到同样问题的人并没有完全解释他们是如何解决这个问题的。我不知道这里发生了什么。

我应该制作一个名为“加载新文件”的按钮，单击它时显示允许用户选择一个文件。

HTML

<input type="button" class="clear-button" onclick="clearB()" value="Clear Board" /><br /><br />
<input type="button" value="Load Game To 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 this function without allowing the user to open file.
    }
}

最后，我不能在函数 n() 中放置一个函数来操作文件的内容。无论我把它放在哪里，它都会在不打开文件选择对话框的情况下触发该功能。

Answer 1

第一次点击后对话框不可见，因为第一次点击给事件处理程序附加了一个匿名函数来打开 my_file 但它并没有执行它。

第二次点击执行匿名函数，因为它已经被附加。这将触发 my_file 的点击事件:

  function showFileUpload(){        
        document.getElementById('get_file').onclick = function() {
            document.getElementById('my_file').click()
        }
  }

此版本触发 my_file 的点击事件

 function showFileUpload_2(){
document.getElementById('my_file').click()                               
 }

这是html

  <input type="button" id="get_file" 
          onclick="showFileUpload_2();" value="Load New Game">
    <input type="file" id="my_file">