循环JavaScript不更改链接文本
我在for循环中有一个嵌套的for循环,它应该将链接文本更改为1到5之间的随机数。链接的ID是“aX_Y”,X和Y是数字。连杆布置在4x3正方形中。问题在于,链接文本的随机数仅在最后一行显示:循环JavaScript不更改链接文本,javascript,css,Javascript,Css,我在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
<!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>
风险
a:链接,a:访问{color:#eee;边框:3px solid#ccc;文本装饰:无;填充:20px;}
.1{背景:#7B3B;}
.2{背景:#547980;}
#状态{颜色:#eee;填充:1px;文本对齐:居中}
.当前{边框:3px实心#000;}
var xtorn=真;
var gameOver=false;
var numMoves=0;
函数newgame()
{
var status=document.getElementById('status');
numMoves=0;
gameOver=false;
xtrn=真;
status.innerHTML='轮到玩家了';
对于(变量x=0;x<4;x++)
{
对于(变量y=0;y<3;y++)
{
document.getElementById('a'+x+'\u'+y).innerHTML=Math.floor(Math.random()*5+1);
console.log('a'+x+'\+y);
}
}
}
功能电流(选定)
{
var status=document.getElementById('status');
var值=所选的.value;
}
//document.getElementById(“status”).setAttribute(“class”,“two”);
轮到玩家了
以下是它的直接链接:
嘿,我很确定它在工作……其他的盒子被前面的盒子重叠了,你看不到它们。Firebug显示所有框中的值
a {
display:block;
float:left;
}
br {
clear:both;
}
…虽然实际上那些顶级元素不应该像那样重新设计样式,但我会把它们都放在一个
中,并使它们成为.game a
和.game br
嘿,我很确定它正在工作…其他框只是与前面的框重叠,你看不到它们。Firebug显示所有框中的值
a {
display:block;
float:left;
}
br {
clear:both;
}
…虽然实际上那些顶级元素不应该像那样重新设计样式,但我还是把它们都放在一个
中,让它们成为.game a
和.game br
(在Firefox中测试)
你的Javascript代码很好;所有的方格都被随机数填充。相反,我看到的是,每一行链接都与前一行重叠,因此前一行中的数字被隐藏
重叠是故意的吗?(在Firefox中测试)
你的Javascript代码很好;所有的方格都被随机数填充。相反,我看到的是,每一行链接都与前一行重叠,因此前一行中的数字被隐藏
重叠是故意的吗?所有随机数都正确生成。由于您的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;}
瞧,这一切都运行得很好。所有的随机数都正确生成了。由于您的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;}
瞧,这一切都运行得很好。对CSS的这一更改解决了这个问题:
a:link, a:visited
{
color: #eee;
border:3px solid #ccc;
text-decoration:none;
display:inline-block;
padding:20px;
}
对CSS的此更改修复了以下问题:
a:link, a:visited
{
color: #eee;
border:3px solid #ccc;
text-decoration:none;
display:inline-block;
padding:20px;
}