Javascript 为什么我的事件处理程序只在chrome中工作？_Javascript_Html

Javascript 为什么我的事件处理程序只在chrome中工作？

javascript html

Javascript 为什么我的事件处理程序只在chrome中工作？,javascript,html,Javascript,Html,我不明白为什么我的简单javascript应用程序可以在chrome中正常工作，但在firefox或internet explorer中却不行（注意：我只是个学生，所以请耐心等待，谢谢！）在firefox和InternetExplorer中，我可以浏览和选择文本文件，但一旦选择，它就什么也不做，这就是为什么我认为事件处理程序是问题所在。我似乎找不到任何关于浏览器处理onchange事件的方式存在差异的信息同时为了更全面和简洁，我将添加整个web应用程序，但我认为唯一相关的部分是main.js

我不明白为什么我的简单javascript应用程序可以在chrome中正常工作，但在firefox或internet explorer中却不行（注意：我只是个学生，所以请耐心等待，谢谢！）

在firefox和InternetExplorer中，我可以浏览和选择文本文件，但一旦选择，它就什么也不做，这就是为什么我认为事件处理程序是问题所在。我似乎找不到任何关于浏览器处理onchange事件的方式存在差异的信息

同时为了更全面和简洁，我将添加整个web应用程序，但我认为唯一相关的部分是main.js中的事件处理程序。我很确定问题出在那里，但我不是100%确定

编辑：Internet Explorer现在可以工作了。问题是脚本被阻止，因为它是本地文件。在Firefox中仍然不起作用，我也没有看到任何脚本被阻止的情况。它也不应该是任何插件，因为我只有3个：Lastpass、Chatzilla和Freemake视频下载程序

在Chrome中（应该如何工作）：

在Firefox中（不工作）：

Firefox javascript控制台：

HTML（frontend.HTML）：

}

文本文件（tictactoe.txt）：

我有一个解决方案，但它是拖放式的。你的IE版本需要什么？只有IE 10+支持它。

其他浏览器中是否有错误？是否调用了

change

事件？请尝试注册

reader.onerror

并查看是否有任何东西被触发？我们将立即查看这两个事件，一秒钟。@SuperScript-在Firefox中添加了Javascript控制台输出，但我没有看到任何有用的东西。可能没有回答你的问题。我怎么才能确定是否有人在打电话？其他浏览器的控制台上没有显示任何内容。好的，我发现在internet explorer中有一个框，上面说ActiveX控件被阻止了。当我启用它们时，它开始工作。Firefox仍然存在问题。这只是我用来学习的一个附带项目，所以我并不是真的在寻找另一个可行的解决方案，除非我了解我目前的问题以及为什么这个解决方案更好。谢谢你！

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="main.js"></script>
</head>

<body>

<h1>Tic Tac Toe</h1>
<div>
  Select a text file: 
  <input type="file" id="fileInput">
</div>
<pre id="fileDisplayArea"></pre>

window.onload = function() {

// Initialize associative array to store contents of the tic tac toe board.

var board = {
northwest_square: "", north_square: "", northeast_square: "",
west_square: "", center_square: "", east_square: "",
southwest_square: "", south_square: "", southeast_square: ""
};

// Read the file and store into string variable "fileStr"
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');

fileInput.addEventListener('change', function(e) {
  var file = fileInput.files[0];
  var textType = /text.*/;

  if (file.type.match(textType)) {
  var reader = new FileReader();

  reader.onload = function(e) {
    var fileStr = reader.result.toLowerCase();

    //remove whitespace
    fileStr=fileStr.replace(/(\r\n|\n|\r)/gm,"");

    //Store into the array
    var i = 0;
    for(var index in board){
      board[index] = fileStr[i];
      i++;
    }

    var winner = findWinner();

    //Display board
    fileDisplayArea.innerText += reader.result.toLowerCase();

    //Display winner
    switch(winner){
        case "INVALID":
            fileDisplayArea.innerText += "\n\nINVALID: File contents     must be 'x', 'o', or '_'";
            break;
        case "INCOMPLETE":
            fileDisplayArea.innerText += "\n\nINCOMPLETE: No winner found. Unused blocks exist.";
            break;
        case "TIE": 
            fileDisplayArea.innerText += "\n\nTIE: No winners found."
            break;
    }
    if(winner != 'INVALID' && winner != "INCOMPLETE" && winner != "TIE"){
      fileDisplayArea.innerText += "\n\nCongratulations player '" + winner + "'. You are the winner!";
    }

  }

  reader.readAsText(file);  
  } else {
    fileDisplayArea.innerText = "File not supported!";
  }
});

//FUNCTION(S)
function findWinner(){
//check if contents are 'x', 'o' or '_';
for(var index in board){
    if(board[index] != 'x' 
        && board[index] != 'o' 
        && board[index] != '_'){
        return "INVALID";
    }
}
        // ROW1 (NW, N, NE)
        if(board["northwest_square"] === board["north_square"]
            && board["northeast_square"] === board["north_square"]
            && board["north_square"] != '_'){

            // If triple, then return contents (either 'x' or 'o')
            return board["north_square"];
        }
        // ROW2 (W, Center, E)
        else if(board["west_square"] === board["center_square"]
            && board["east_square"] === board["center_square"]
            && board["center_square"] != '_'){

            // If triple, then return contents (either 'x' or 'o')
            return board["center_square"];
        }
        // ROW3 (SW, S, SE)
        else if(board["southwest_square"] === board["south_square"]
            && board["southeast_square"] === board["south_square"]
            && board["south_square"] != '_'){

            // If triple, then return contents (either 'x' or 'o')
            return board["south_square"];
        }
        // COL1 (NW, W, SW)
        else if(board["northwest_square"] === board["west_square"]
            && board["southwest_square"] === board["west_square"]
            && board["west_square"] != '_'){

            // If triple, then return contents (either 'x' or 'o')
            return board["west_square"];
        }
        // COL2 (N, Center, S)
        else if(board["north_square"] === board["center_square"]
            && board["south_square"] === board["center_square"]
            && board["center_square"] != '_'){

            // If triple, then return contents (either 'x' or 'o')
            return board["center_square"];
        }
        // COL3 (NE, E, SE)
        else if(board["northeast_square"] === board["east_square"]
            && board["southeast_square"] === board["east_square"]
            && board["east_square"] != '_'){

            // If triple, then return contents (either 'x' or 'o')
            return board["east_square"];
        }
        // DIAG1 (NW, Center, SE) 
        else if(board["northwest_square"] === board["center_square"]
            && board["southeast_square"] === board["center_square"]
            && board["center_square"] != '_'){

            // If triple, then return contents (either 'x' or 'o')
            return board["center_square"];
        }
        // DIAG2 (NE, Center, SW)
        else if(board["northeast_square"] === board["center_square"]
            && board["southwest_square"] === board["center_square"]
            && board["center_square"] != '_'){

            // If triple, then return contents (either 'x' or 'o')
            return board["center_square"];
        }
        else if(board["northwest_square"] === '_' 
            || board["north_square"] === '_'
            || board["northeast_square"] === '_'
            || board["west_square"] === '_'
            || board["center_square"] === '_'
            || board["east_square"] === '_'
            || board["southeast_square"] === '_'
            || board["south_square"] === '_'
            || board["southwest_square"] === '_'){
            return "INCOMPLETE";
        }
        else{
            return "TIE";
        }
}

oxo
oox
xox