[英]Why does my event handler only work in chrome?
我不知道為什么我的簡單javascript應用程序在chrome中可以正常工作，但在Firefox或Internet Explorer中卻不能正常工作（注意：我只是一個學生，所以請多多包涵，謝謝！）。
在firefox和Internet Explorer中，我可以瀏覽並選擇一個文本文件，但是一旦選擇它就什么都不做，這就是為什么我假設事件處理程序是問題所在。 我似乎找不到任何關於瀏覽器處理onchange事件的方式有所不同的信息。
為了同時簡潔明了，我將添加整個Web應用程序，但我認為唯一相關的部分是main.js中的事件處理程序。 我很確定問題出在那，但我不是100％肯定。
編輯：Internet Explorer現在可以工作。 問題在於腳本是本地文件，因此被阻止。 仍然無法在Firefox中運行，而且我看不到有關腳本被阻止的任何信息。 它也不應該是任何插件，因為我只有3：Lastpass，Chatzilla和Freemake Video Downloader。
在Chrome中（應該如何工作）：
在Firefox中（不起作用）：
Firefox JavaScript控制台：
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
我有解決方案，但這是拖放操作。 您的IE版本需要什么？ 僅IE 10+支持它。
為什么帶有事件處理程序的addClass removeClass不能按預期工作？
[英]Why my addClass removeClass with event handler does not work as expected?
為什么我的選擇字段事件處理程序不能在Chrome / Android中工作？
[英]Why doesn't my select field event handler work in Chrome/Android?
為什么在事件處理程序之外初始化變量然后重新分配它只允許代碼工作一次？
[英]Why does initialising the variable outside the event handler and then reassigning it only allow the code to work once?
為什么我的按鈕需要單擊兩次才能使事件處理程序第一次工作，但此后只需單擊一次？
[英]Why does my button need to be clicked twice for the event handler to work the first time, but thereafter just once?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.