我有一个项目,需要将一系列随机值映射到按钮标题,并且我在随机生成后分配标题时遇到了问题。下面是我的HTML和JavaScript:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="javaFile.js"></script>
</head>
<body>
<h1>Matching Game</h1>
<hr>
<br>
<button class="gameBtn" id="b00"></button>
<table>
<tr>
<td></td>
<td><button class="gameBtn" id="b01">NO SHOW</button></td>
<td><button class="gameBtn" id="b02">NO SHOW</button></td>
<td><button class="gameBtn" id="b03">NO SHOW</button></td>
</tr>
<tr>
<td><button class="gameBtn" id="b10">NO SHOW</button></td>
<td><button class="gameBtn" id="b11">NO SHOW</button></td>
<td><button class="gameBtn" id="b12">NO SHOW</button></td>
<td><button class="gameBtn" id="b13">NO SHOW</button></td>
</tr>
<tr>
<td><button class="gameBtn" id="b20">NO SHOW</button></td>
<td><button class="gameBtn" id="b21">NO SHOW</button></td>
<td><button class="gameBtn" id="b22">NO SHOW</button></td>
<td><button class="gameBtn" id="b23">NO SHOW</button></td>
</tr>
<tr>
<td><button class="gameBtn" id="b30">NO SHOW</button></td>
<td><button class="gameBtn" id="b31">NO SHOW</button></td>
<td><button class="gameBtn" id="b32">NO SHOW</button></td>
<td><button class="gameBtn" id="b33">NO SHOW</button></td>
</tr>
</table>
</body>
</html>
JavaScript:
var startingList = ["1", "1", "2", "2", "3", "3", "4", "4", "5", "5", "6", "6", "7", "7", "8", "8"];
var gameList = [];
function onLoad() {
var i;
for (i = startingList.length - 1; i >= 0; i--) {
var rndNum = Math.floor(Math.random() * (i + 1));
gameList.push(startingList[rndNum]);
startingList.splice(rndNum, 1);
}
document.getElementById("b00").innerHTML = gameList[0];
}
window.onload = onLoad();
alert(gameList);
因此,在上面,我注释掉了大多数按钮分配,以专注于正确地完成第一部分。随机生成是有效的,因为当我让它显示警告消息时,它会正确地显示随机数组。但是,当我包含按钮赋值时,它不会处理警报(我相信这是因为代码触发了一个错误,因此没有达到那个点。
同样在上面,我拉出按钮,看看是不是表导致了问题,但这两种方式都不起作用。它应该在表的第一部分。
我检查了其他答案,并遵循相同的格式来标记按钮,并仔细检查了文件名以确保一切正确。只是有点迷路了。任何帮助都是非常感谢的。
发布于 2018-07-22 06:44:12
可能是这样的:
var startingList = ["1", "1", "2", "2", "3", "3", "4", "4", "5", "5", "6", "6", "7", "7", "8", "8"];
var gameList = [];
function int_rnd(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
function onLoad() {
for (var key in startingList) {
var rndNum = int_rnd(key, startingList.length - 1);
gameList.push(startingList[rndNum]);
startingList.splice(rndNum, 1);
}
document.getElementById("b00").innerHTML = gameList[0];
}
window.onload = onLoad;
<h1>Matching Game</h1>
<hr>
<br>
<button class="gameBtn" id="b00"></button>
<table>
<tr>
<td></td>
<td><button class="gameBtn" id="b01">NO SHOW</button></td>
<td><button class="gameBtn" id="b02">NO SHOW</button></td>
<td><button class="gameBtn" id="b03">NO SHOW</button></td>
</tr>
<tr>
<td><button class="gameBtn" id="b10">NO SHOW</button></td>
<td><button class="gameBtn" id="b11">NO SHOW</button></td>
<td><button class="gameBtn" id="b12">NO SHOW</button></td>
<td><button class="gameBtn" id="b13">NO SHOW</button></td>
</tr>
<tr>
<td><button class="gameBtn" id="b20">NO SHOW</button></td>
<td><button class="gameBtn" id="b21">NO SHOW</button></td>
<td><button class="gameBtn" id="b22">NO SHOW</button></td>
<td><button class="gameBtn" id="b23">NO SHOW</button></td>
</tr>
<tr>
<td><button class="gameBtn" id="b30">NO SHOW</button></td>
<td><button class="gameBtn" id="b31">NO SHOW</button></td>
<td><button class="gameBtn" id="b32">NO SHOW</button></td>
<td><button class="gameBtn" id="b33">NO SHOW</button></td>
</tr>
</table>
https://stackoverflow.com/questions/51459562
复制相似问题