Javascriptでボタンをクリックすると、私はチェス盤をリセットできますか？

私はこのコードを書いていますが、ボタンをクリックしたときにチェス盤をリセットする方法はわかりません。ボタンをクリックすると、チェス盤が繰り返し生成されます。私はどのように問題を解決するか分からない。Javascriptでボタンをクリックすると、私はチェス盤をリセットできますか？

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Chessboard</title> 
     <link rel="stylesheet" sype="text/css" href = "chessboard.css"> 
     <script src="chessboard.js"></script> 
    </head> 
    <body> 
     <button onclick="fn()">Display</button> 
     <p></p> 
     <div id="chessBoard"></div> 
    </body> 
</html>

はJavaScript：

function fn() { 
    var x=8; 
    var y=8; 

    var chessBoard = document.getElementById("chessBoard"); 

    for (var i=0; i<y; i++){ 
     var row = chessBoard.appendChild(document.createElement("div")); 

     for (var j=0; j<x; j++){ 
      row.appendChild(document.createElement("span")); 
     } 
    } 
}

CSS：

#chessBoard { 
    display: inline-block; 
} 

#chessBoard div { 
    line-height: 1px; 
} 

#chessBoard span { 
    display: inline-block; 
    width: 32px; 
    height: 32px; 
} 

#chessBoard div:nth-child(odd) span:nth-child(even), 
#chessBoard div:nth-child(even) span:nth-child(odd){ 
    background-color: black; 
} 

#chessBoard div:nth-child(even) span:nth-child(even), 
#chessBoard div:nth-child(odd) span:nth-child(odd){ 
    background-color: snow; 
}

出典

2016-06-14 david

前のボードを削除することはありません。あなたはもっと新しい行を続けています。 –

多分

すぎsympleが、それは前に二を再作成するdivチェス盤の内容を削除することenoughtですボード。

function fn() { 
    var x=8; 
    var y=8; 

    var chessBoard = document.getElementById("chessBoard"); 
    chessBoard.innerHTML = ""; 
    for (var i=0; i<y; i++){ 
     var row = chessBoard.appendChild(document.createElement("div")); 
     for (var j=0; j<x; j++){ 
      row.appendChild(document.createElement("span")); 
      } 
    } 

}

出典

2016-06-14 20:40:08

@MarcBは、元のボードを再描画する前にクリアする必要があると言いました。コードにwhileループを追加するだけでそれを実行できます。

function fn() 
{ 
    var x=8; 
    var y=8; 

    var chessBoard = document.getElementById("chessBoard"); 
    while(chessBoard.children.length > 0) 
    { 
    chessBoard.removeChild(chessBoard.childNodes[0]); 
    } 

    for (var i=0; i<y; i++) 
    { 
     var row = chessBoard.appendChild(document.createElement("div")); 
     for (var j=0; j<x; j++) 
     { 
      row.appendChild(document.createElement("span")); 
     } 
    } 
}

出典

2016-06-14 20:44:40 Morvael

Javascriptでボタンをクリックすると、私はチェス盤をリセットできますか？

答えて

関連する問題