使用.innerHTML更改按钮文本JavaScript的问题
使用.innerHTML更改按钮文本JavaScript的问题
提问于 2018-07-22 03:47:07
我有一个项目，需要将一系列随机值映射到按钮标题，并且我在随机生成后分配标题时遇到了问题。下面是我的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);因此，在上面，我注释掉了大多数按钮分配，以专注于正确地完成第一部分。随机生成是有效的，因为当我让它显示警告消息时，它会正确地显示随机数组。但是，当我包含按钮赋值时，它不会处理警报(我相信这是因为代码触发了一个错误，因此没有达到那个点。
同样在上面，我拉出按钮，看看是不是表导致了问题，但这两种方式都不起作用。它应该在表的第一部分。
我检查了其他答案，并遵循相同的格式来标记按钮，并仔细检查了文件名以确保一切正确。只是有点迷路了。任何帮助都是非常感谢的。
回答 1
Stack Overflow用户
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51459562
复制相关文章
相似问题