...

View Full Version : javascript not working at all in Firefox.



phoenixshade
05-07-2007, 04:11 PM
I've been up and coding all night (14 hours straight now), so maybe I've gone blind or stupid or both, but I'm having a serious problem with Firefox.

The javascript code is not working at all. Nada. Not even the window.onload. I even tried putting the whole script inside of the <script></script> element instead of in an external file. It works fine in IE 7 (go figure). Can anyone tell me why FF chokes?

Forgive the long code, but I don't see it anywhere obvious, so maybe in lurks in the details...

Live Link (http://www450.pair.com/lnusser/chess/create2.html)

create.html (validates per Validome)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create New Lesson - Chess Instruction Live</title>
<link rel="shortcut icon" href="favicon.ico" />
<script type="text/javascript" src="script/createclass.js"></script>
<style type="text/css">
body {
background:#FDFDFD;
font-family:"trebuchet ms",verdana,sans-serif;
}
#wrap {
width:955px;
margin:0 auto;
position:relative;
overflow:auto;
}
.border {
background:#666 url(img/border.gif) repeat-x;
width:100%;
height:24px;
}
#header {
background:url(img/logo.gif) no-repeat;
height:150px;
text-align:right;
}
#header ul {
margin:0;
padding:15px 0 0 0;
list-style:none;
width:714px;
float:right;
font-weight:bold;
}
#header li {
background-color:#CDCDCF;
margin:0;
padding:0;
text-align:center;
width:117px;
float:left;
border:solid 1px #FDFDFD;
}
#header li a {
color:#000;
font-size:14px;
line-height:22px;
text-decoration:none;
width:100%;
display:block;
}
#header li:hover {
background-color:#FDFDFD;
}
#header form {
margin-top:15px;
float:right;
display:block;
clear:right;
width:100%;
}
#k a {font-size:16px;}
#k:hover {background:url(img/sbk.gif) no-repeat 0% 40%;}
#q:hover {background:url(img/sbq.gif) no-repeat 0% 40%;}
#r:hover {background:url(img/sbr.gif) no-repeat 0% 40%;}
#b:hover {background:url(img/sbb.gif) no-repeat 0% 40%;}
#n:hover {background:url(img/sbn.gif) no-repeat 0% 40%;}
#p:hover {background:url(img/sbp.gif) no-repeat 0% 40%;}
#content {
clear:both;
padding:0 15px 15px 20px;
text-align:justify;
overflow:auto;
}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
#tools, #debug {
margin-bottom:5px;
width:908px;
height:100px;
border:solid 1px #999;
padding:0 5px;
clear:both;
}
#menu {
position:relative;
margin-bottom:5px;
float:left;
clear:left;
width:515px;
height:386px;
border:solid 1px #999;
padding:0 5px;
text-align:left;
font-size:13px;
overflow:auto;
}
#menu p {
margin:6px 0;
line-height:1.2em;
}
.poptools {
display:none;
margin-left:15px;
}
#pieces {
margin:6px;
visibility:visible;
}
#menu form {margin:0;}
#board {
/* position:relative; */
margin-bottom:5px;
float:right;
clear:right;
width:384px;
height:384px;
border:solid 2px #000;
background:url(img/board.gif) repeat top left;
}
.sq {
height:48px;
width:48px;
float:left;
}
.nf {clear:left;}
#write {
float:left;
clear:left;
margin-bottom:5px;
width:525px;
}
#moves {
float:right;
clear:right;
margin-bottom:5px;
width:384px;
text-align:center;
}
#footer {
background:url(img/footer.gif) no-repeat;
height:76px;
}
h1,h2,h3,h4,h5,h6 {font-family:"trebuchet ms",verdana,sans-serif;}
form p {margin:0;}
#debug {font-size:10px; overflow:scroll;}
</style>
</head>

<body>
<div id="wrap">
<div id="header">
<img src="img/title.gif" style="float:right;" alt="Chess Instruction LIVE" />
<form id="login" action="javascript:void(0);">
<p><b>Member Sign-In:</b>&nbsp;&nbsp;Username<input type="text" size="13" id="username" name="username" />&nbsp;&nbsp;Password<input type="password" size="13" id="password" name="password" />&nbsp;&nbsp;<input type="checkbox" value="yes" id="remember" name="remember" />Remember Me&nbsp;&nbsp;<input type="submit" value="Sign In" id="signin" name="signin" /></p>
</form>
<p style="clear:right; margin:0; font-size:12px;"><a href="register.php">New members register FREE!</a>&nbsp;&nbsp;&nbsp;<a href="recover.php">Forgotten username/password?</a></p>
<ul><li id="k"><a href="myhome.php">MY HOME</a></li>
<li id="q"><a href="schedule.php">Schedule</a></li>
<li id="b"><a href="create.php">New Class</a></li>
<li id="n"><a href="review.php">Review</a></li>
<li id="r"><a href="forums.php">Discussion</a></li>
<li id="p"><a href="links.php">Chess Links</a></li>
</ul>
</div>
<div id="content">
<h2>Create New Lesson</h2>
<div id="tools">
</div>
<div id="menu">
<p><b>Chessboard:</b> Set up predefined positions and lines for this lesson. <a id="boardsetlink" href="javascript:toggleMenu('boardset');">Show</a></p>
<div id="boardset" class="poptools">
<p><b>Positions:</b> Set up or edit positions for this lesson. <a id="positionslink" href="javascript:toggleMenu('positions');">Show</a></p>
<div id="positions" class="poptools">
<img src="img/wk.gif" alt="White King" onclick="selectPiece('wk');" />
<img src="img/wq.gif" alt="White Queen" onclick="selectPiece('wq');" />
<img src="img/wr.gif" alt="White Rook" onclick="selectPiece('wr');" />
<img src="img/wb.gif" alt="White Bishop" onclick="selectPiece('wb');" />
<img src="img/wn.gif" alt="White Knight" onclick="selectPiece('wn');" />
<img src="img/wp.gif" alt="White Pawn" onclick="selectPiece('wp');" />
<img src="img/hl.gif" alt="Highlight" onclick="selectHighlight();" /><br />
<img src="img/bk.gif" alt="Black King" onclick="selectPiece('bk');" />
<img src="img/bq.gif" alt="Black Queen" onclick="selectPiece('bq');" />
<img src="img/br.gif" alt="Black Rook" onclick="selectPiece('br');" />
<img src="img/bb.gif" alt="Black Bishop" onclick="selectPiece('bb');" />
<img src="img/bn.gif" alt="Black Knight" onclick="selectPiece('bn');" />
<img src="img/bp.gif" alt="Black Pawn" onclick="selectPiece('bp');" />
<img src="img/del.gif" alt="Delete" onclick="selectDelete();" /><br />
<form action="javascript:storePosition();"><p><b>Move:</b> Number <input type="text" size="1" name="moveno" value="1" /> Side <input type="radio" name="move" value="white" checked="checked" />White. <input type="radio" name="move" value="black" />Black.<br />
<b>Evaluation:</b> <input type="radio" name="eval" value="white" />White Wins. <input type="radio" name="eval" value="draw" />Draw. <input type="radio" name="eval" value="black" />Black Wins.<br />
<input type="submit" value="Save Position" name="savepos" id="savepos" /><input type="submit" value="Edit Position" name="editpos" id="editpos" disabled="disabled" /></p>
</form>
</div>
<p><b>Lines and Variations:</b> Set up lines and variations for this position. <a id="lineslink" href="javascript:toggleMenu('lines')">Show</a></p>
<div id="lines" class="poptools">
<p>Test<br />with<br />some<br />random<br />text</p>
</div>
</div>
<p><b>Chessboard:</b> Set up predefined positions and lines for this lesson. <a id="number2link" href="javascript:toggleMenu('number2')">Show</a></p>
<div id="number2" class="poptools">
<img src="img/wk.gif" alt="White King" onclick="selectPiece('wk');" />
<img src="img/wq.gif" alt="White Queen" onclick="selectPiece('wq');" />
<img src="img/wr.gif" alt="White Rook" onclick="selectPiece('wr');" />
<img src="img/wb.gif" alt="White Bishop" onclick="selectPiece('wb');" />
<img src="img/wn.gif" alt="White Knight" onclick="selectPiece('wn');" />
<img src="img/wp.gif" alt="White Pawn" onclick="selectPiece('wp');" />
<img src="img/hl.gif" alt="Highlight" onclick="selectHighlight();" /><br />
<img src="img/bk.gif" alt="Black King" onclick="selectPiece('bk');" />
<img src="img/bq.gif" alt="Black Queen" onclick="selectPiece('bq');" />
<img src="img/br.gif" alt="Black Rook" onclick="selectPiece('br');" />
<img src="img/bb.gif" alt="Black Bishop" onclick="selectPiece('bb');" />
<img src="img/bn.gif" alt="Black Knight" onclick="selectPiece('bn');" />
<img src="img/bp.gif" alt="Black Pawn" onclick="selectPiece('bp');" />
<img src="img/del.gif" alt="Delete" onclick="selectDelete();" /><br />
</div>
<p><b>Chessboard:</b> Set up predefined positions and lines for this lesson. <a id="number3link" href="javascript:toggleMenu('number3')">Show</a></p>
<div id="number3" class="poptools">
<img src="img/wk.gif" alt="White King" onclick="selectPiece('wk');" />
<img src="img/wq.gif" alt="White Queen" onclick="selectPiece('wq');" />
<img src="img/wr.gif" alt="White Rook" onclick="selectPiece('wr');" />
<img src="img/wb.gif" alt="White Bishop" onclick="selectPiece('wb');" />
<img src="img/wn.gif" alt="White Knight" onclick="selectPiece('wn');" />
<img src="img/wp.gif" alt="White Pawn" onclick="selectPiece('wp');" />
<img src="img/hl.gif" alt="Highlight" onclick="selectHighlight();" /><br />
<img src="img/bk.gif" alt="Black King" onclick="selectPiece('bk');" />
<img src="img/bq.gif" alt="Black Queen" onclick="selectPiece('bq');" />
<img src="img/br.gif" alt="Black Rook" onclick="selectPiece('br');" />
<img src="img/bb.gif" alt="Black Bishop" onclick="selectPiece('bb');" />
<img src="img/bn.gif" alt="Black Knight" onclick="selectPiece('bn');" />
<img src="img/bp.gif" alt="Black Pawn" onclick="selectPiece('bp');" />
<img src="img/del.gif" alt="Delete" onclick="selectDelete();" /><br />
</div>
<p><b>Chessboard:</b> Set up predefined positions and lines for this lesson. <a id="number4link" href="javascript:toggleMenu('number4')">Show</a></p>
<div id="number4" class="poptools">
<img src="img/wk.gif" alt="White King" onclick="selectPiece('wk');" />
<img src="img/wq.gif" alt="White Queen" onclick="selectPiece('wq');" />
<img src="img/wr.gif" alt="White Rook" onclick="selectPiece('wr');" />
<img src="img/wb.gif" alt="White Bishop" onclick="selectPiece('wb');" />
<img src="img/wn.gif" alt="White Knight" onclick="selectPiece('wn');" />
<img src="img/wp.gif" alt="White Pawn" onclick="selectPiece('wp');" />
<img src="img/hl.gif" alt="Highlight" onclick="selectHighlight();" /><br />
<img src="img/bk.gif" alt="Black King" onclick="selectPiece('bk');" />
<img src="img/bq.gif" alt="Black Queen" onclick="selectPiece('bq');" />
<img src="img/br.gif" alt="Black Rook" onclick="selectPiece('br');" />
<img src="img/bb.gif" alt="Black Bishop" onclick="selectPiece('bb');" />
<img src="img/bn.gif" alt="Black Knight" onclick="selectPiece('bn');" />
<img src="img/bp.gif" alt="Black Pawn" onclick="selectPiece('bp');" />
<img src="img/del.gif" alt="Delete" onclick="selectDelete();" /><br />
</div>
</div>
<div id="board">
<div class="sq" id="a8"></div>
<div class="sq" id="b8"></div>
<div class="sq" id="c8"></div>
<div class="sq" id="d8"></div>
<div class="sq" id="e8"></div>
<div class="sq" id="f8"></div>
<div class="sq" id="g8"></div>
<div class="sq" id="h8"></div>
<div class="sq nf" id="a7"></div>
<div class="sq" id="b7"></div>
<div class="sq" id="c7"></div>
<div class="sq" id="d7"></div>
<div class="sq" id="e7"></div>
<div class="sq" id="f7"></div>
<div class="sq" id="g7"></div>
<div class="sq" id="h7"></div>
<div class="sq nf" id="a6"></div>
<div class="sq" id="b6"></div>
<div class="sq" id="c6"></div>
<div class="sq" id="d6"></div>
<div class="sq" id="e6"></div>
<div class="sq" id="f6"></div>
<div class="sq" id="g6"></div>
<div class="sq" id="h6"></div>
<div class="sq nf" id="a5"></div>
<div class="sq" id="b5"></div>
<div class="sq" id="c5"></div>
<div class="sq" id="d5"></div>
<div class="sq" id="e5"></div>
<div class="sq" id="f5"></div>
<div class="sq" id="g5"></div>
<div class="sq" id="h5"></div>
<div class="sq nf" id="a4"></div>
<div class="sq" id="b4"></div>
<div class="sq" id="c4"></div>
<div class="sq" id="d4"></div>
<div class="sq" id="e4"></div>
<div class="sq" id="f4"></div>
<div class="sq" id="g4"></div>
<div class="sq" id="h4"></div>
<div class="sq nf" id="a3"></div>
<div class="sq" id="b3"></div>
<div class="sq" id="c3"></div>
<div class="sq" id="d3"></div>
<div class="sq" id="e3"></div>
<div class="sq" id="f3"></div>
<div class="sq" id="g3"></div>
<div class="sq" id="h3"></div>
<div class="sq nf" id="a2"></div>
<div class="sq" id="b2"></div>
<div class="sq" id="c2"></div>
<div class="sq" id="d2"></div>
<div class="sq" id="e2"></div>
<div class="sq" id="f2"></div>
<div class="sq" id="g2"></div>
<div class="sq" id="h2"></div>
<div class="sq nf" id="a1"></div>
<div class="sq" id="b1"></div>
<div class="sq" id="c1"></div>
<div class="sq" id="d1"></div>
<div class="sq" id="e1"></div>
<div class="sq" id="f1"></div>
<div class="sq" id="g1"></div>
<div class="sq" id="h1"></div>
</div>
<div id="write">
<form action="javascript:sendChat();" id="chatform">
<p><input id="newchat" name="newchat" type="text" size="75" /><input type="submit" value="Talk" /></p>
</form>
</div>
<div id="moves">
<b>Black to Move.</b> White wins.
</div>
<div id="debug"></div>
</div>
<div id="footer"></div>
</div>
</body>

</html>

createclass.js (the window.onload is at the end)

var putPiece;
var moveCode;
var pieces = new Array(64);
var hilite = new Array(64);
function normalBoard() {
boardArea.style.cursor = 'default';
putPiece = '';
for (var i=0; i<64; i++) {
allBoard[i].onclick = null;
}
}
function selectPiece(piece) {
putPiece = piece;
boardArea.style.cursor = 'url("img/' + piece + '.cur"),default';
for (var i=0; i<64; i++) {
allBoard[i].onclick = addPiece;
}
}
function selectHighlight() {
boardArea.style.cursor = 'url("img/hl.cur"),default';
for (var i=0; i<64; i++) {
allBoard[i].onclick = highlight;
}
}
function selectDelete() {
boardArea.style.cursor = 'url("img/del.cur"),default';
for (var i=0; i<64; i++) {
allBoard[i].onclick = delPiece;
}
}
function addPiece(boardSquare) {
if (!boardSquare) { boardSquare = this; }
var square = getY(boardSquare)*8 + getX(boardSquare);
var capture = pieces[square];
pieces[square] = pieceCode(putPiece);
boardSquare.innerHTML = '<img src="img/' + putPiece + '.gif" alt="Chess Piece" />';
return capture;
}
function delPiece(boardSquare) {
if (!boardSquare) { boardSquare = this; }
var square = getY(boardSquare)*8 + getX(boardSquare);
pieces[square] = '';
hilite[square] = 0;
boardSquare.innerHTML = '';
boardSquare.style.backgroundColor='transparent';
}
function highlight() {
var localX = getX(this);
var localY = getY(this);
var square = localY*8 + localX;
var sumXY = localX + localY;
hilite[square] = 1;
if (sumXY%2) {
this.style.backgroundColor='#FF6';
} else {
this.style.backgroundColor='#CC3';
}
}
function movePiece(clear) {
for (var i=0; i<64; i++) {
if (pieces[i]) {
allBoard[convert(i)].onclick = fromSquare;
debugArea.innerHTML += pieces[i] + ',';
} else {
allBoard[convert(i)].onclick = null;
}
if (clear) allBoard[i].style.backgroundColor = 'transparent';
}
}
function fromSquare() {
var square = getY(this)*8 + getX(this);
putPiece = pieceDecode(pieces[square]);
moveCode = pieces[square] + String.fromCharCode(square+65);
delPiece(this);
for (var i=0; i<64; i++) {
allBoard[i].onclick = toSquare;
}
this.style.backgroundColor = '#F33';
boardArea.style.cursor = 'url("img/' + putPiece + '.cur"),default';
}
function toSquare () {
var square = getY(this)*8 + getX(this);
var capture = pieces[square];
addPiece(this);
moveCode += String.fromCharCode(square+65);
var startPos = moveCode.charCodeAt(1)-65;
var endPos = moveCode.charCodeAt(2)-65;
var dif = endPos - startPos;
if (((dif==7) || (dif==9)) && (putPiece=='wp') && !capture) {
capture = 'e';
delPiece(allBoard[convert(endPos)+8]);
}
else if (((dif==-7) || (dif==-9)) && (putPiece=='bp') && !capture) {
capture = 'E';
delPiece(allBoard[convert(endPos)-8]);
}
if (capture) { moveCode += ':' + capture; }
switch (moveCode) {
case 'KEC':
delPiece(allBoard[56]);
putPiece = 'wr';
addPiece(allBoard[59]);
break;
case 'KEG':
delPiece(allBoard[63]);
putPiece = 'wr';
addPiece(allBoard[61]);
break;
case 'k}{':
delPiece(allBoard[0]);
putPiece = 'br';
addPiece(allBoard[3]);
break;
case ('k}'+String.fromCharCode(127)):
delPiece(allBoard[7]);
putPiece = 'br';
addPiece(allBoard[5]);
}
movePiece(1);
boardArea.style.cursor = 'default';
debugArea.innerHTML += 'moveCode:' + moveCode + ' ';
return capture;
}
function getX(square) {
var squareX = square.id.charCodeAt(0) - 97;
return squareX;
}
function getY(square) {
var squareY = square.id.charCodeAt(1) - 49;
return squareY;
}
function pieceCode(piece) {
var pieceType = piece.charAt(1);
if (piece.charAt(0) == 'w') {
pieceType = pieceType.toUpperCase();
}
return pieceType;
}
function pieceDecode(piece) {
var decode = (piece.charCodeAt(0)<91) ? 'w' : 'b';
decode += piece.toLowerCase();
return decode;
}
function encodePosition() {
var position = '!';
for (var i=0; i<64; 8++) {
if (pieces[i]){
position += pieces[i] + String.fromCharCode(i+65);
}
}
return position;
}
function encodeHilite() {
var hilited = '*';
for (var i=0; i<64; i++) {
if (hilite[i]) {
hilited += String.fromCharCode(i+65);
}
}
return hilited + '*';
}
function toggleMenu(menuId) {
debugArea.innerHTML += 'toggleMenu(' + menuId + ').<br />';
menuLink = document.getElementById(menuId + 'link');
menuDiv = document.getElementById(menuId);
if (menuDiv.style.display == "block") {
menuDiv.style.display = "none";
menuLink.innerHTML = "Show";
normalBoard();
movePiece(0);
} else {
menuDiv.style.display = "block";
menuLink.innerHTML = "Hide";
}
}
function storePosition() {
}
function convert(index) {
return index ^ 56;
}
window.onload = function() {
debugArea = document.getElementById('debug');
boardArea = document.getElementById('board');
allBoard = boardArea.getElementsByTagName('div');
debugArea.innerHTML = '<b>Debug Area</b><br />';
}

Bill Posters
05-07-2007, 04:38 PM
Fwiw, FF's js error console is flagging up invalid increment operand on line #146 in the createclass.js (http://www450.pair.com/lnusser/chess/script/createclass.js) file.


for (var i=0; i<64; 8++) {

phoenixshade
05-07-2007, 04:42 PM
Fwiw, FF's js error console is flagging up invalid increment operand on line #146 in the createclass.js (http://www450.pair.com/lnusser/chess/script/createclass.js) file.

It's worth quite a bit; that was the cause of the problem. Thanks much, Bill.

Bill Posters
05-07-2007, 04:59 PM
Again, fwiw, you could do worse than install the Firebug extension for Firefox (https://addons.mozilla.org/en-US/firefox/addon/1843).
It significantly improves on FF's own error reporting, making debugging much easier.

Use the error console as an ever-fresh set of eyes. ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum