Question

我无法弄清楚为什么我的简单javascript应用程序在chrome中工作正常，但在firefox或Internet Explorer中却没有（注意：我只是一名学生，所以请耐心等待，谢谢！）。

在firefox和Internet Explorer中，我可以浏览并选择一个文本文件，但一旦选中它就什么都不做，这就是为什么我假设事件处理程序是问题。我似乎无法找到有关浏览器处理onchange事件的方式存在差异的任何信息。

为了彻底和简洁，我将添加整个Web应用程序，但我认为唯一相关的部分是main.js中的事件处理程序。我很确定问题出在那里，但我不是百分百肯定。

编辑：Internet Explorer现在可以使用了。问题是脚本被阻止，因为它是本地文件。仍然没有在Firefox中工作，我也看不到有关脚本被阻止的任何信息。它不应该是任何插件，因为我只有3：Lastpass，Chatzilla和Freemake Video Downloader。

在Chrome中（它应该如何工作）： enter image description here

在Firefox中（不工作）： enter image description here

Firefox javascript控制台： enter image description here

HTML（frontend.html）：

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

Javascript（main.js）

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

}

文本文件（tictactoe.txt）：

oxo
oox
xox

Answer 1

我有解决方案，但它是拖累和放大器下降。你的IE版需要什么？只有IE 10+支持它。

为什么我的事件处理程序只能在chrome中使用？

1 个答案: