javascript - Why does my event handler only work in chrome? -
i can't figure out why simple javascript application work fine in chrome, not in firefox or internet explorer (note: i'm student, please bear me, , thanks!).
in firefox , internet explorer, can browse , select text file, once selected nothing, why i'm assuming event handler problem. can't seem find there being differences in way browser handle onchange event.
to thorough , concise @ same time, i'll add entire web application think relevant portion event handler in main.js. i'm pretty sure problem that, i'm not 100% sure.
edit: internet explorer works now. problem scripts being blocked since local file. still doesn't work in firefox, , don't see scripts being blocked. shouldn't plugins either because have 3: lastpass, chatzilla, , freemake video downloader.
in chrome (how it's supposed 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 text file: <input type="file" id="fileinput"> </div> <pre id="filedisplayarea"></pre>
javascript (main.js)
window.onload = function() { // initialize associative array store contents of 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 file , store 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 array var = 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 '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 + "'. winner!"; } } reader.readastext(file); } else { filedisplayarea.innertext = "file not supported!"; } }); //function(s) function findwinner(){ //check if contents '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, 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, 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, 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, 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, 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, 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, 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, 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
i had solution, drag & drop. ie version needs? ie 10+ supports it.
Comments
Post a Comment