在html中插入圖像對象時JavaScript不起作用

主編：重新做了很多事情。但類似的錯誤。在html中插入圖像對象時JavaScript不起作用

var white = 1; 
var turn = white; 
var table = document.getElementById("game"); 

function createTable(table, white) { 
    var i,j,tr; 
    for(i=0;i<8;i++) 
    { 
     tr = document.createElement('tr'); 

     for(j=0;j<8;j++) 
      tr.appendChild(document.createElement('td')).id = String.fromCharCode((white == 1 ? j : 8-j) +97)+(white == 1 ? 8-i : i+1); 

     table.appendChild(tr); 
    } 

    for(i=0;i<8;i++) 
    { 
     for(j=0;j<8;j++) 
     { 
      table.rows[i].cells[j].setAttribute("class","cell"); 
     } 
    } 
} 

function onImageLoad(t) { 

    console.log(t); 
} 

function createImageArray() { 
    var w,c,p; 
    var image = new Array(2); 
    for(w=0;w<2;w++) 
    { 
     image[w] = new Array(2); 
     for(c=0;c<2;c++) 
     { 
      image[w][c] = new Array(6); 
      for(p=0;p<6;p++) 
      { 
       image[w][c][p] = new Array(2); 
      } 
     } 
    } 
    return image; 
} 

function createBlankimageArray() { 
    var blank = new Array(2); 
    return blank; 
} 

function bufferImages(image,blank) { 

    var w, c, p, s, word; 

    for(w=0;w<2;w++) 
    { 
     for(c=0;c<2;c++) 
     { 
      for(p=0;p<6;p++) 
      { 
       for(s=0;s<2;s++) 
       { 

        word = w.toString() + c.toString() + (p+1).toString() + s.toString() + ".png"; 
        //console.log(word); 
        image[w][c][p][s] = new Image(); 
        image[w][c][p][s].onload = onImageLoad(word); 
        image[w][c][p][s].src='final images/'+ word; 

       } 
      } 
     } 
    } 

    for(i=0;i<2;i++) 
    { 
     blank[i] = new Image(); 
     word = i.toString() + '.png'; 
     blank[i].onload = onImageLoad(word); 
     blank[i].src= 'final images/'+ word; 
    } 
} 

function intializeState() { 

    var x,y,temp; 
    var state = new Array(8); 
    for(y=0;y<8;y++) 
    { 
     state[y] = new Array(8); 
     for(x=0;x<8;x++) 
     { 
      state[y][x] = new Array(3); 


      // Set Cell White or Black. 
      state[y][x][0] = (x+y)%2; 


      if(y==1 || y == 6) 
      { 
       temp = 0; 
       state[y][x][1] = temp; 
       state[y][x][2] = (white==1 ? 0 : 1); 
      } 
      else if(x==0 || x==7) {temp = 1;} 
      else if(x==1 || x==6) {temp = 2;} 
      else if(x==2 || x==5) {temp = 3;} 
      else if(x==3) {temp = 4;} 
      else if(x==4) {temp = 5;} 

      if(temp!=0) 
      { 
       if(y==0) 
       { 
        state[y][x][1] = temp; 
        state[y][x][2] = (white == 1 ? 0 : 1); 
       } 
       else if(y==7) 
       { 
        state[y][x][1] = temp; 
        state[y][x][2] = (white == 1 ? 1 : 0); 
       } 
       else 
       { 
        state[y][x][1] = 7; 
        state[y][x][2] = 7; 
       } 
      } 
     } 
    } 

    return state; 
} 

function drawState(table,state,image,blank) { 

    var y,x; 
    //var table = document.getElementById("game"); 
    var w,c,p; 

    for(y=0;y<8;y++) 
    { 
     for(x=0;x<8;x++) 
     { 
      c = state[y][x][0]; 
      w = state[y][x][1]; 
      p = state[y][x][2]; 
      if(p!=7) 
      { 
       table.rows[y].cells[x].appendChild(image[w][c][p][0]); 
      } 
      else 
      { 
       table.rows[y].cells[x].appendChild(blank[c]); 
      } 
     } 
    } 
} 

var state = intializeState(); 
var image = createImageArray(); 
var blank = createBlankimageArray(); 
createTable(table, white); 
bufferImages(image,blank); 
intializeState(state); 
drawState(table,state,image,blank);

HTML代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Anti Chess</title> 
    <link rel="stylesheet" type="text/css" href="screen2.css"> 
</head> 
<body> 
    <h1 id="game_title">Anti Chess by theManikJindal</h1> 
    <a href="http://thylavatory.wordpress.com" target="_blank">Visit Blog!</a> 
    <br /> 
    <br /> 
    <table id="game"></table> 
    <script src="req_logic.js"></script> 
</body> 
</html>

上述腳本需要在初始位置來創建一個棋盤。我遇到的問題是在drawState函數中。

控制檯：（已打印出所有這些加載後的圖像名稱）之後：

Uncaught TypeError: Cannot read property '1' of undefined req_logic.js:154

這是該行：table.rows[y].cells[x].appendChild(image[w][c][p][0]);

所以我在哪裏出了錯。

編輯：jsFiddle.net鏈接：http://jsfiddle.net/8H3Ha/1/

來源

2013-05-06 tMJ

如果提供了jsfiddle.net，這會容易得多... – 2013-05-06 19:01:48

Seconding Brad的評論：請發表[最小/ sscce]（http://sscce.org/）[現場演示]（http ：//jsfiddle.net/）重現你的問題。 – 2013-05-06 19:02:31

對不起@ alex23只是更新了問題。什麼是jsfiddle.net？ – tMJ 2013-05-06 19:03:30

更改定義OT initializeState()到：

function intializeState() { 

    var x,y,temp; 
    var state = new Array(8); 
    for(y=0;y<8;y++) 
    { 
     state[y] = new Array(8); 
     for(x=0;x<8;x++) 
     { 
      state[y][x] = new Array(3); 


      // Set Cell White or Black. 
      state[y][x][0] = (x+y)%2; 


      if(y==1 || y == 6) 
      { 
       temp = 0; 
       state[y][x][1] = temp; 
       state[y][x][2] = (white==1 ? 0 : 1); 
      } 
      else if(x==0 || x==7) {temp = 1;} 
      else if(x==1 || x==6) {temp = 2;} 
      else if(x==2 || x==5) {temp = 3;} 
      else if(x==3) {temp = 4;} 
      else if(x==4) {temp = 5;} 

      if(temp!=0) 
      { 
       if(y==0) 
       { 
        state[y][x][1] = temp; 
        state[y][x][2] = (white == 1 ? 0 : 1); 
       } 
       else if(y==7) 
       { 
        state[y][x][1] = temp; 
        state[y][x][2] = (white == 1 ? 1 : 0); 
       } 
       else 
       { 
        state[y][x][1] = 7; 
        state[y][x][2] = 7; 
       } 
      } 
     } 
    } 
    return state; 
}

然後稱其爲：

state = initializeState();

問題是參數變量命名state影響着initializeState中的同名全局變量。我也建議state數組的元素應該是對象而不是數組。當元素是統一的時候應該使用數組，但是每個子元素都有不同的用途：[0]是單元格顏色，[1]是塊，[2]是塊顏色。

來源

2013-05-06 19:23:12 Barmar

它仍然無法正常工作。關於你對狀態數組的建議，元素是統一的。對我來說，他們只是圖像。遊戲邏輯不會在JavaScript上實現。它在服務器端。所以，我想讓它成爲一個數組不是好的！ – tMJ 2013-05-06 19:40:11

他們不是圖像。 '//設置單元格白色或黑色。狀態[y] [x] [0] =（x + y）％2;' – Barmar 2013-05-06 19:41:54

狀態數組就是在那裏保存狀態。沒有任何邏輯會對他們起作用。它就像繪圖函數的參考。 BTW更新了你建議的很多東西。還是類似的錯誤。查看jsFiddle鏈接 – tMJ 2013-05-06 19:53:48

在html中插入圖像對象時JavaScript不起作用

回答

相關問題