Html 使用 Javascript 更改 td 元素文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15473391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 06:37:30 来源:igfitidea点击:
Changing td element text using Javascript
提问by hakuna matata
I am writing code for html file that will display the number of each sum of dice for 36000 thrown dices. I wrote code and everything seems fine, I printed the numbers of each sum and I got numbers, but when I try to put them inside the td element, I see nothing in the table. I searched on stackoverflow and on google and all said same thing, but it's not working. Here is my code:
我正在为 html 文件编写代码，该文件将显示 36000 个掷骰子的每个骰子总和的数量。我写了代码，一切看起来都很好，我打印了每个总和的数字并得到了数字，但是当我尝试将它们放入 td 元素时，我在表中什么也看不到。我在 stackoverflow 和 google 上搜索，都说同样的话，但它不起作用。这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
<!--
/*
Position #0 : Sum of Dices = 2
Position #1 : Sum of Dices = 3
Position #2 : Sum of Dices = 4
Position #3 : Sum of Dices = 5
Position #4 : Sum of Dices = 6
Position #5 : Sum of Dices = 7
Position #6 : Sum of Dices = 8
Position #7 : Sum of Dices = 9
Position #8 : Sum of Dices = 10
Position #9 : Sum of Dices = 11
Position #10: Sum of Dices = 12
*/
var sums = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
for (var i = 0; i < 36000; i++) {
var dice1 = Math.floor(Math.random() * 6) + 1;
var dice2 = Math.floor(Math.random() * 6) + 1;
var sum = dice1 + dice2;
switch(sum) {
case 2:
sums[0]++;
break;
case 3:
sums[1]++;
break;
case 4:
sums[2]++;
break;
case 5:
sums[3]++;
break;
case 6:
sums[4]++;
break;
case 7:
sums[5]++;
break;
case 8:
sums[6]++;
break;
case 9:
sums[7]++;
break;
case 10:
sums[8]++;
break;
case 11:
sums[9]++;
break;
case 12:
sums[10]++;
break;
default:
break;
}
}
document.getElementById("sum2").innerHTML = sums[0];
document.getElementById("sum3").innerHTML = sums[1];
document.getElementById("sum4").innerHTML = sums[2];
document.getElementById("sum5").innerHTML = sums[3];
document.getElementById("sum6").innerHTML = sums[4];
document.getElementById("sum7").innerHTML = sums[5];
document.getElementById("sum8").innerHTML = sums[6];
document.getElementById("sum9").innerHTML = sums[7];
document.getElementById("sum10").innerHTML = sums[8];
document.getElementById("sum11").innerHTML = sums[9];
document.getElementById("sum12").innerHTML = sums[10];
// -->
</script>
</head>
<body>
<h1>Roll Dice 36,000 Times</h1>
<table border="1">
<th>Sum of Dice</th>
<th>Total Times Rolled</th>
<tr>
<td>2</td>
<td id="sum2"></td>
</tr>
<tr>
<td>3</td>
<td id="sum3"></td>
</tr>
<tr>
<td>4</td>
<td id="sum4"></td>
</tr>
<tr>
<td>5</td>
<td id="sum5"></td>
</tr>
<tr>
<td>6</td>
<td id="sum6"></td>
</tr>
<tr>
<td>7</td>
<td id="sum7"></td>
</tr>
<tr>
<td>8</td>
<td id="sum8"></td>
</tr>
<tr>
<td>9</td>
<td id="sum9"></td>
</tr>
<tr>
<td>10</td>
<td id="sum10"></td>
</tr>
<tr>
<td>11</td>
<td id="sum11"></td>
</tr>
<tr>
<td>12</td>
<td id="sum12"></td>
</tr>
</table>
</body>
</html>
Some said to use innerText, and textContent but none seem to work. Why is it not working?
有人说使用innerText和textContent，但似乎都不起作用。为什么它不起作用？
I don't know if this helps but I'm using Google Chrome on Mac OS X
我不知道这是否有帮助，但我在 Mac OS X 上使用 Google Chrome
回答by Bojan Kovacevic
Use windows.onload function to be sure html is loaded:
使用 windows.onload 函数确保 html 已加载：
window.onload=function(){
document.getElementById("sum2").innerHTML = sums[0];
document.getElementById("sum3").innerHTML = sums[1];
document.getElementById("sum4").innerHTML = sums[2];
document.getElementById("sum5").innerHTML = sums[3];
document.getElementById("sum6").innerHTML = sums[4];
document.getElementById("sum7").innerHTML = sums[5];
document.getElementById("sum8").innerHTML = sums[6];
document.getElementById("sum9").innerHTML = sums[7];
document.getElementById("sum10").innerHTML = sums[8];
document.getElementById("sum11").innerHTML = sums[9];
document.getElementById("sum12").innerHTML = sums[10];
};
回答by Muthu Kumaran
Your JS runs before the DOM was ready. Put your script within window.onloadand try again,
您的 JS 在 DOM 准备好之前运行。把你的脚本放进去window.onload再试一次，
<script type="text/javascript">
<!--
window.onload = function(){
/*
Position #0 : Sum of Dices = 2
Position #1 : Sum of Dices = 3
Position #2 : Sum of Dices = 4
Position #3 : Sum of Dices = 5
Position #4 : Sum of Dices = 6
Position #5 : Sum of Dices = 7
Position #6 : Sum of Dices = 8
Position #7 : Sum of Dices = 9
Position #8 : Sum of Dices = 10
Position #9 : Sum of Dices = 11
Position #10: Sum of Dices = 12
*/
var sums = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
for (var i = 0; i < 36000; i++) {
var dice1 = Math.floor(Math.random() * 6) + 1;
var dice2 = Math.floor(Math.random() * 6) + 1;
var sum = dice1 + dice2;
switch(sum) {
case 2:
sums[0]++;
break;
case 3:
sums[1]++;
break;
case 4:
sums[2]++;
break;
case 5:
sums[3]++;
break;
case 6:
sums[4]++;
break;
case 7:
sums[5]++;
break;
case 8:
sums[6]++;
break;
case 9:
sums[7]++;
break;
case 10:
sums[8]++;
break;
case 11:
sums[9]++;
break;
case 12:
sums[10]++;
break;
default:
break;
}
}
document.getElementById("sum2").innerHTML = sums[0];
document.getElementById("sum3").innerHTML = sums[1];
document.getElementById("sum4").innerHTML = sums[2];
document.getElementById("sum5").innerHTML = sums[3];
document.getElementById("sum6").innerHTML = sums[4];
document.getElementById("sum7").innerHTML = sums[5];
document.getElementById("sum8").innerHTML = sums[6];
document.getElementById("sum9").innerHTML = sums[7];
document.getElementById("sum10").innerHTML = sums[8];
document.getElementById("sum11").innerHTML = sums[9];
document.getElementById("sum12").innerHTML = sums[10];
}
// -->
</script>
回答by Mohamed Ali
Try this:
尝试这个：
$(function(){
var sums = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
for (var i = 0; i < 36000; i++) {
var dice1 = Math.floor(Math.random() * 6) + 1;
var dice2 = Math.floor(Math.random() * 6) + 1;
var sum = dice1 + dice2;
switch(sum) {
case 2:
sums[0]++;
break;
case 3:
sums[1]++;
break;
case 4:
sums[2]++;
break;
case 5:
sums[3]++;
break;
case 6:
sums[4]++;
break;
case 7:
sums[5]++;
break;
case 8:
sums[6]++;
break;
case 9:
sums[7]++;
break;
case 10:
sums[8]++;
break;
case 11:
sums[9]++;
break;
case 12:
sums[10]++;
break;
default:
break;
}
}
document.getElementById("sum2").innerHTML = sums[0];
document.getElementById("sum3").innerHTML = sums[1];
document.getElementById("sum4").innerHTML = sums[2];
document.getElementById("sum5").innerHTML = sums[3];
document.getElementById("sum6").innerHTML = sums[4];
document.getElementById("sum7").innerHTML = sums[5];
document.getElementById("sum8").innerHTML = sums[6];
document.getElementById("sum9").innerHTML = sums[7];
document.getElementById("sum10").innerHTML = sums[8];
document.getElementById("sum11").innerHTML = sums[9];
document.getElementById("sum12").innerHTML = sums[10];
});
