JavaScript 可以在 Firefox 上运行，但不能在 Chrome 浏览器上运行答案

【问题标题】：JavaScript working on Firefox but not on Chrome browserJavaScript 可以在 Firefox 上运行，但不能在 Chrome 浏览器上运行
【发布时间】：2017-05-12 04:14:20
【问题描述】：

我正在尝试使用 JavaScript 创建一个 onclick 事件，当用户按下按钮时，它将检查文件是否已被选中，然后它会触发事件并将 CSS 更改为 Element 到 block 从display: none。但是，它可以与 Firefox 完美配合，但不能与 Google Chrome 配合使用。我只是使用普通的 JavaScript。我很好奇为什么它不起作用。

这是我的代码：

HTML

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

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

【问题讨论】：

为什么它不起作用？长度没有像您期望的那样更新吗？这会缩小问题的范围。
您是否在控制台中遇到任何错误？
我检查了控制台是否有错误，但 chrome 控制台上没有任何内容。
请发minimal reproducible example。 HTML 可能会有所帮助
如果您将var inputID = document.getElementById('files').files; 移动到点击事件的内部，效果会很好。

标签： javascript html css google-chrome

【解决方案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。如果你在用户点击提交按钮后得到值，它会为变量分配正确的数字。

【讨论】：