Question

我在for循环中有一个嵌套的for循环，它应该将链接文本更改为1到5之间的随机数。链接的ID是“aX_Y”，X和Y是数字。链接排列为4x3平方。问题是链接文本的随机数仅显示在最后一行：

<!DOCTYPE html>
<html>
<head>
<title>RISK</title>
<style type="text/css" media="screen">
    a:link, a:visited {color: #eee;border:3px solid #ccc;text-decoration:none;padding:20px;}
    .one {background: #7B3B3B;}
    .two {background: #547980;}
    #status {color: #eee;padding:1px;text-align:center}
    .current {border:3px solid #000;}
</style>
<script type="text/javascript" charset="utf-8">
var xTurn = true;
var gameOver = false;
var numMoves = 0;

function newgame()
{
    var status = document.getElementById('status');
    numMoves = 0;
    gameOver = false;
    xTurn = true;
    status.innerHTML = 'Player One\'s turn';

    for(var x = 0; x < 4; x++)
    {
        for(var y = 0; y < 3; y++)
        {
            document.getElementById('a' + x + '_' + y).innerHTML = Math.floor(Math.random()*5 + 1);
            console.log('a' + x + '_' + y);
        }
    }
}
function current(selected)
{
    var status = document.getElementById('status');
    var value = selected.value; 
}
//document.getElementById("status").setAttribute("class", "two");
</script>
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head>

<body onload='newgame();'>
<p id="status" class="one">Player One's turn</p>
<br />
<a href="#" id="a0_0" class="one current" onclick="current(this);"></a>
<a href="#" id="a1_0" class="two" onclick="current(this);"></a>
<a href="#" id="a2_0" class="two" onclick="current(this);"></a>
<a href="#" id="a3_0" class="two" onclick="current(this);"></a>
<br />

<a href="#" id="a0_1" class="two" onclick="current(this);"></a>
<a href="#" id="a1_1" class="two" onclick="current(this);"></a>
<a href="#" id="a2_1" class="two" onclick="current(this);"></a>
<a href="#" id="a3_1" class="two" onclick="current(this);"></a>
<br />

<a href="#" id="a0_2" class="two" onclick="current(this);"></a>
<a href="#" id="a1_2" class="two" onclick="current(this);"></a>
<a href="#" id="a2_2" class="two" onclick="current(this);"></a>
<a href="#" id="a3_2" class="two" onclick="current(this);"></a>
<br /><br />

<p><input type="button" id="newgame" value="New Game" onclick="newgame();" /></p>
</body>
</html>

以下是指向它的直接链接：

https://dl.dropbox.com/u/750932/iPhone/risk.html

Answer 1

对CSS的此更改修复了此问题：

a:link, a:visited 
{
    color: #eee;
    border:3px solid #ccc;
    text-decoration:none;
    display:inline-block;
    padding:20px;
}

Answer 2

嘿，我很确定正在工作......其他的盒子只是与前面的盒子重叠而你却看不到它们。 Firebug在所有框中显示值。

a {
    display:block;
    float:left;
}

br {
    clear:both;
}

...虽然实际上那些顶级元素不应该像那样重新设置，但我会将它全部放在<div id="game"></div>中并使它们成为.game a和.game br。

Answer 3

（在Firefox中测试）

您的Javascript代码很好;所有网格方块都填充了随机数。我所看到的是，每一行链接都与前一行重叠，因此上一行中的数字被隐藏。

重叠是否有意？

Answer 4

正确生成所有随机数。由于您的CSS规则，前两行只是隐藏。您可以通过进行以下CSS更改来证明这一点：

更改如下所示的行：

a:link, a:visited {color: #eee;border:3px solid #ccc;text-decoration:none;padding:20px;}

到此：

a:link, a:visited {color: #eee;border:3px solid #ccc;text-decoration:none;}

瞧，这一切都很美妙。

JavaScript for循环不改变链接文本

4 个答案: