JavaScript在Firefox上工作，但在Chrome浏览器上没有

Question

我正在尝试使用JavaScript创建onclick事件，当用户按下某个按钮时，它会检查文件是否已选中，然后它将触发该事件并将CSS更改为元素{{{ 1}}来自block。然而，它与Firefox完美配合，但它不适用于谷歌浏览器。我只是使用普通的JavaScript。我很好奇为什么它不起作用。

这是我的代码：

HTML

display: none

JS

<section id="spinnerLoader" class="mod model-1">
    <input type="file" name="userNames" id="files">
    <input type="submit" class="btn btn-primary" id="submitbtn" value="Submit">

Answer 1

在Paul Abbott的帮助下，通过以下方式更改此代码：

    <script type="text/javascript">
  var inputID = document.getElementById('files').files;
  var clickbtn = document.getElementById('submitbtn');
  clickbtn.addEventListener('click', function(e) {

    if(inputID.length == 0){
      e.preventDefault();
    }else{
        var spinID = document.getElementById('spinnerLoader');
        spinID.style.display = 'block';
    }
  });
</script>

要

<script type="text/javascript">
  var clickbtn = document.getElementById('submitbtn');
  clickbtn.addEventListener('click', function(e) {
    var inputID = document.getElementById('files').files;
    if(inputID.length == 0){
      e.preventDefault();
    }else{
        var spinID = document.getElementById('spinnerLoader');
        spinID.style.display = 'block';
    }
  });
</script>

该代码与Chrome浏览器完美配合。

freginold的解释

var inputID行获取文件数量，因此如果您在用户选择任何文件之前分配值，则该值为0。如果在用户单击提交按钮后获得该值，则会为变量分配正确的数字。