我正在尝试更改阵列中可用的背景颜色。 tds也是使用javascript代码创建的,但现在我想使用js设置背景颜色,这是没有发生的。
下面是我的代码。感谢。
<html>
<head>Colour Memory Game</head>
<body onload = "myFrame()";>
<p id="demo", onload = "distributeColors()";></p>
</body>
<script>
var rows = 4; //cards side by side
var columns = 4; //cards in vertical
var z = rows*columns;
var arrColors = ["#3be6c4","#e6e03b","#6f3be6","#4fe63b","#e63b3b","#ff5a00","#ff00de","#3b8fe6"]; //array of colors
// creating a div for gameboard to be prepared
div = document.createElement("div");
div.style.width = "800";
div.style.height = "800";
div.style.background = "purple";
div.id = "frame";
//div.onload = "myFrame()";
document.getElementsByTagName('body')[0].appendChild(div);
//preparing a frame
function myFrame(){
var frame = document.createElement("table");
var body = document.createElement("tbody");
for(i=0; i<rows; i++){
var r = document.createElement("tr");
r.style.width = "200";
r.style.height = "150";
r.style.background = "white";
for(j=0; j<columns; j++){
c = document.createElement("td");
c.style.width = "200";
c.style.height = "150";
c.style.background = "white";
c.id = "cards";
r.appendChild(c);
};
body.appendChild(r);
};
frame.appendChild(body);
document.getElementById('frame').appendChild(frame);
return c;
};
/*placement of colors into each card*/
//function randomDistribution(backgroundcolors) {
var colors = arrColors.concat(arrColors); //array of colors to be used
//colorString = colors.toString();
for (i=0; i<=colors.length; i++){
document.getElementById('cards').style.background = color[Math.floor(Math.random()*colors.length)];
};
</script>
</html>
答案 0 :(得分:0)
首先检查这一行
<body onload = "myFrame()";>
<p id="demo", onload = "distributeColors()";></p>
正确的是
<body onload = "myFrame();">
<p id="demo" onload = "distributeColors();"></p>
并尝试
c.style.backgroundColor="#fff";
并且没有必要“返回c;”最后。