Question

我遇到onclick问题。我搜索了互联网，但有同样问题的人并没有完全解释他们如何解决问题。我无法弄清楚这里发生了什么。

我应该创建一个名为＆＃34; Load New＆＃34;的按钮，点击它时显示允许用户选择文件。

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">

Answer 2

不需要此功能 -

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

将脚本更改为

<script>
    function n(){

if(document.getElementById('get_file') != null){
//document.getElementById('get_file').onclick = function() {  //comment this function
    document.getElementById('my_file').click()


//}

//LoadGame(); //triggers this function without allowing the user to open file.
}
}
</script>

Javascript onclick事件仅在第二次单击时触发

2 个答案: