Why does my event handler only work in chrome?
Question
I can't figure out why my simple javascript application will work fine in chrome, but not in firefox or internet explorer (note: I'm just a student, so please bear with me, and thanks!).
In firefox and internet explorer, I can browse and select a text file, but once selected it does nothing, which is why I'm assuming the event handler is the problem. I can't seem to find anything about there being differences in the way browser handle the onchange event.
To be thorough and concise at the same time, I'll add the entire web application but I think the only relevant portion is the event handler in main.js. I'm pretty sure the problem is with that, but I'm not 100% sure.
EDIT: Internet Explorer works now. The problem was that scripts were being blocked since it was a local file. Still doesn't work in Firefox, and I don't see anything about scripts being blocked. It shouldn't be any plugins either because I only have 3: Lastpass, Chatzilla, and Freemake Video Downloader.
In Chrome (How it's supposed to work):
In Firefox (Not working):
Firefox javascript console:
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";
}
}
}
Text file (tictactoe.txt):
oxo
oox
xox
1 answers
solution1
0 2014-04-15 21:27:24
I had solution, but it was drag & drop. What are your IE version needs? Only IE 10+ supports it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.