私は、Conway の Game of Life の Web バージョンを開発しています (hasbro ゲームではありません。調べてください)。最近、ボード/ワールド/あなたがそれを何と呼びたいかの実際の更新でエラーに遭遇しました。コードを実行してデバッグしようとすると、次のエラーが発生します。
Uncaught TypeError: Cannot call method 'getElementsByTagName' of null
コードを徹底的にチェックしました。これが私が今持っているものです：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Conway's Game of Life</title>
<style>
body, body * {
font-family:monospace;
font-size:12px;
line-height:50%;
}
span:hover{
background-color:blue;
cursor:crosshair;
}
</style>
<script>
//ASCII approach not to be changed.
window.onload=function(){
//to fix modulos bug
Number.prototype.mod = function(n) {
return ((this%n)+n)%n;
}
alert("Press q for help.");
var isDraw=false;
var rows=100;
var columns=100;
var isPlaying=false;
var speed=200;
var rtext="";
for(var i=1;i<=rows;i++){
var ctext="";
for(var j=1;j<=columns;j++){
ctext+="<span>.</span>";
}
rtext+="<div>"+ctext+"</div>";
}
document.body.innerHTML+=rtext;
//Adds toggle to each cell
function assignEvent(spanIndex){
var column=(spanIndex.mod(columns));
var row=(spanIndex-column)/columns;
document.getElementsByTagName("span")[spanIndex].onclick=function(){
toggle(row+1,column+1);
};
document.getElementsByTagName("span")[spanIndex].onmouseover=function(){
if(isDraw){
toggle(row+1,column+1);
}
};
}
for(var k=0;k<document.getElementsByTagName("span").length;k++){
assignEvent(k);
}
function get(row,column){
var rowM=row-1;
var columnM=column-1;
alert(rowM);
var elem = document.getElementsByTagName("div").item(rowM).getElementsByTagName("span").item(columnM);
//may want to add features to the function...
return elem;
}
//function for changing cell value
function set(row,column,val){
get(row,column).innerHTML=val;
}
function toggle(row,column){
if(get(row,column).innerHTML==="."){
set(row,column,"0");
}
else{
set(row,column,".");
}
}
//END of gui implementation
//START processer
function down1(param){var result=param;var orig=param[0];result[0]=(orig+1).mod(rows);return result;}
function up1(param){var result=param;var orig=param[0];result[0]=(orig+rows-1).mod(rows);return result;}
function left1(param){var result=param;var orig=param[1];result[1]=(orig+columns-1).mod(columns);return result;}
function right1(param){var result=param;var orig=param[1];result[1]=(orig+1).mod(columns);return result;}
function interp(arrayc){return get(arrayc[0],arrayc[1]);}
function getAdjacents(row,column){
var out=[];
var nw=[row,column];var n=[row,column];var ne=[row,column];var w=[row,column];var e=[row,column];var se=[row,column];var s=[row,column];var sw=[row,column];
nw=up1(left1(nw));n=up1(n);ne=up1(right1(ne));w=left1(w);e=right1(e);sw=down1(left1(sw));s=down1(s);se=down1(right1(se));
out=[interp(nw),interp(n),interp(ne),interp(w),interp(e),interp(sw),interp(s),interp(se)];
return out;
}
function updateCell(row,column){
var adjacents=getAdjacents(row,column);
var adjacentsA=[];//alive
var adjacentsB=[];//dead
for(var s=0;s<adjacents;s++){
if(adjacents[s].innerHTML==="0"){
adjacentsA.push(adjacents[s]);
}
else{
adjacentsB.push(adjacents[s]);
}
}
if(get(row,column).innerHTML==="."){
if(adjacentsA.length===3){
toggle(row,column);
}
}
else{
if(adjacentsA.length!==3 && adjacentsA.length!==2){
toggle(row,column);
}
}
}
function update(){
for(var r=1;r<=rows;r++){
for(var c=1;c<=columns;c++){
updateCell(r,c);
}
}
}
//END processer
var playInterval;
function togglePlay(interval){
if(isPlaying){
clearInterval(playInterval);
isPlaying=false;
}
else{
playInterval=setInterval(function(){update();},interval);
}
}
/*keyboard shortcuts:
p=play/pause
h=help
i=zoom in
o=zoom out
d=draw
s=set speed
*/
document.body.onkeypress=function(e){
var key=e.keyCode;
//alert(key);
if(key===112){togglePlay(speed);}
else if(key===113){alert("p=play/pause\nh=help\ni=zoom in\no=zoom out\nd=draw\ns=set speed");}
else if(key===100){if(isDraw){isDraw=false;}else{isDraw=true;}}
};
};
</script>
</head>
<body>
</body>
</html>
すべてのコードを説明するのは非常に難しいので、回答する前によく読んでください。エラーをキャッチできるかどうかを確認します。アルゴリズムの多くが過度に複雑で非効率的であることはわかっていますが、完全に変更したくはありません。
私はこれに本当にイライラしています。助けてください。