Something really weird is happening, it works when I document.write() outside the window.onload = function(){} But It doesn’t when I call it from inside. Please note, the table is created (I can tell because I see the source).
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>title</title>
<style type="text/css">
#chessboard{margin:0;padding:0;border:2px solid #000}
#chessboard td{margin:0;padding:0;height:44px;width:42px;border:1px solid #000;background-repeat:no-repeat}
#chessboard td.ws{background-color:#ddd}
#chessboard td.bs{background-color:#999}
#chessboard td.bp{background-image:url('./pieces/bp.png')}
#chessboard td.br{background-image:url('./pieces/br.png')}
#chessboard td.bn{background-image:url('./pieces/bn.png')}
#chessboard td.bb{background-image:url('./pieces/bb.png')}
#chessboard td.bq{background-image:url('./pieces/bq.png')}
#chessboard td.bk{background-image:url('./pieces/bk.png')}
#chessboard td.wp{background-image:url('./pieces/wp.png')}
#chessboard td.wr{background-image:url('./pieces/wr.png')}
#chessboard td.wn{background-image:url('./pieces/wn.png')}
#chessboard td.wb{background-image:url('./pieces/wb.png')}
#chessboard td.wq{background-image:url('./pieces/wq.png')}
#chessboard td.wk{background-image:url('./pieces/wk.png')}
</style>
<script type="text/javascript">
var map="",i,ii,wsbs=true;
var abc=["a","b","c","d","e","f","g","h"];
map+="<div align=\"center\"><table id=\"chessboard\" cellpadding=\"0\" cellspacing=\"0\"><tbody>";
for(i=8;i>0;i--){
map+="<tr>";
for(ii=0;ii<8;ii++){
map+="<td id=\""+abc[ii]+""+i+"\" class=\"";
if(wsbs==true)map+="ws";else map+="bs";
map+="\"> </td>";
if(ii!=7)wsbs=!wsbs;
}
map+="</tr>";
}
map+="</tbody></table></div>";
//document.write(map); works here
window.onload = function(){
document.write(map);
}
</script>
</head>
<body>
</body>
</html>
When you call
document.write()after the page has loaded (viawindow.onload()), you effectively obliterate the page as it has already rendered. Instead you should set theinnerHTMLof some existing element on the page to the contents ofmap. Since you have an empty<body>, it will be safe to write to the body’sinnerHTML. Otherwise, I would recommend creating a placeholder<div>inside the<body>and modifying itsinnerHTMLinstead.