1
私は単純な3行のパズルゲームで作業しています。その論理は理解していますが、グリッドを作成しようとしています。純粋なJavascriptでCSSの色を切り替える
私が探しているのは、青色の四角形をクリックすると、青色のタイルの背景色を白に変更し、同じタイルを再度クリックすると元の色に戻ります。私は純粋なjavascriptでこれをやっています。
私の問題：色を必要に応じて変えたいと思っていますが、現在は青 - >白、そして白 - >青を変更することに制限されています。これにより、ユーザーは基本的に3番目の選択肢に固執することになります。
x回のクリック後に色の変化が止まるのを防ぐために、どのような変更を行うことができますか？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid</title>
<style>
#blueTile {
background-color:blue;
}
td{
text-align: center;
border: 1px solid black;
padding: 3px;
height:50px;
width:50px;
}
table {
border-collapse: collapse;
}
</style>
</head>
body>
<script>
//6x6 array
var solutionArray = new Array(6);
solutionArray[0] = new Array(6);
solutionArray[1] = new Array(6);
solutionArray[2] = new Array(6);
solutionArray[3] = new Array(6);
solutionArray[4] = new Array(6);
solutionArray[5] = new Array(6);
var tile = {};
var blue = tile.colour = "blue";
var white = tile.colour = "white";
var grey = tile.colour = "grey";
solutionArray[0][0]=blue;
solutionArray[0][1]=white;
solutionArray[0][2]=blue;
solutionArray[0][3]=blue;
solutionArray[0][4]=white;
solutionArray[0][5]=blue;
solutionArray[1][0]=white;
solutionArray[1][1]=blue;
solutionArray[1][2]=white;
solutionArray[1][3]=blue;
solutionArray[1][4]=blue;
solutionArray[1][5]=white;
solutionArray[2][0]=blue;
solutionArray[2][1]=white;
solutionArray[2][2]=blue;
solutionArray[2][3]=white;
solutionArray[2][4]=white;
solutionArray[2][5]=blue;
solutionArray[3][0]=white;
solutionArray[3][1]=blue;
solutionArray[3][2]=white;
solutionArray[3][3]=white;
solutionArray[3][4]=blue;
solutionArray[3][5]=blue;
solutionArray[4][0]=blue;
solutionArray[4][1]=blue;
solutionArray[4][2]=white;
solutionArray[4][3]=blue;
solutionArray[4][4]=white;
solutionArray[4][5]=white;
solutionArray[5][0]=blue;
solutionArray[5][1]=white;
solutionArray[5][2]=blue;
solutionArray[5][3]=white;
solutionArray[5][4]=blue;
solutionArray[5][5]=white;
var x = document.createElement("TABLE");
x.setAttribute("id", "gridTable");
document.body.appendChild(x);
for(i=0;i<6;i++)
{
//output the row tag
var y = document.createElement("TR");
y.setAttribute("id", "row"+i);
document.getElementById("gridTable").appendChild(y)
for(j=0;j<solutionArray.length;j++)
{
///output the td tag
var z = document.createElement("TD");
if(solutionArray[i][j] == blue){
z.setAttribute("id", "blueTile");
}
else if (solutionArray[i][j] == white){
z.setAttribute("id", "whiteTile");
}
var t = document.createTextNode(solutionArray[i][j]);
z.appendChild(t);
document.getElementById("row"+i).appendChild(z);
}
}
var blueClick = document.getElementById("blueTile");
blueClick.addEventListener("click", switchColor);
function switchColor(){
blueClick.style.backgroundColor = "white";
blueClick.addEventListener("click", switchBack);
}
function switchBack(){
blueClick.style.backgroundColor = "blue";
blueClick.addEventListener("click", switchColor);
}
</script>
</body>
</html>
2つの要素に同じIDを付けることはできません。 IDはグローバルにユニークで、クラスを使用する必要があります。 – tcooc