使用 Javascript 写入表？我究竟做错了什么？答案

【问题标题】：Writing to table using Javascript? What am I doing wrong?使用 Javascript 写入表？我究竟做错了什么？
【发布时间】：2019-03-21 12:19:12
【问题描述】：

我正在尝试弄清楚如何使用 Javascript 写入表。我一直在使用 document.getElementById("text").innerHTML 但它不起作用。有人可以告诉我我做错了什么吗？

该程序应该“掷”一个骰子 1000 次，计算每个数字掷了多少，然后将结果打印在表格中。

我可以让 Math.random 函数工作，并且我可以计算每个数字的滚动次数，但我似乎无法弄清楚如何将这些数字放在最后的表格中。

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8"; http-equiv="Content-type">
<script type="text/javascript">
	var dice;

	var one = 0;
	var two = 0; 
	var three = 0;
	var four = 0; 
	var five = 0;
	var six = 0; 

	var i;

	for(i=1; i<=1000; i++) {

	dice = Math.floor(Math.random() * 6);
	
	if(dice==1) one++;
	else if(dice==2) two++;
	else if(dice==3) three++;
	else if(dice==4) four++;
	else if(dice==5) five++;
	else six++;

	} //end of for


	//write results to the table
  document.getElementById("r1").innerHTML = one;
	document.getElementById("r2").innerHTML = two;
	document.getElementById("r3").innerHTML = three;
	document.getElementById("r4").innerHTML = four;
	document.getElementById("r5").innerHTML = five;
	document.getElementById("r6").innerHTML = six;
	document.getElementById("sum").innerHTML = i;


</script>
</head>

<body>

<table border = "1">
<tr>
    <th>Face#</th>
    <th>Count</th> 
</tr>

<tr>
    <td>1</td>
    <td id="r1">0</td> 
</tr>

<tr>
    <td>2</td>
    <td id="r2">0</td> 
</tr>

<tr>
    <td>3</td>
    <td id="r3">0</td> 
</tr>

<tr>
    <td>4</td>
    <td id="r4">0</td> 
</tr>

<tr>
    <td>5</td>
    <td id="r5">0</td> 
</tr>

<tr>
    <td>6</td>
    <td id="r6">0</td> 
</tr>

<tr>
    <td>Sum</td>
    <td id="sum">0</td> 
</tr>
</table>

</body>
</html>

【问题讨论】：

所有答案似乎都是正确的。只需尝试脚本标签上的空 defer 属性。

标签： javascript

【解决方案1】：

您的脚本在您的 HTML 加载之前运行 - 将您的脚本放在 HTML 的底部应该可以解决这个问题：

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8"; http-equiv="Content-type">
</head>

<body>

<table border = "1">
<tr>
    <th>Face#</th>
    <th>Count</th> 
</tr>

<tr>
    <td>1</td>
    <td id="r1">0</td> 
</tr>

<tr>
    <td>2</td>
    <td id="r2">0</td> 
</tr>

<tr>
    <td>3</td>
    <td id="r3">0</td> 
</tr>

<tr>
    <td>4</td>
    <td id="r4">0</td> 
</tr>

<tr>
    <td>5</td>
    <td id="r5">0</td> 
</tr>

<tr>
    <td>6</td>
    <td id="r6">0</td> 
</tr>

<tr>
    <td>Sum</td>
    <td id="sum">0</td> 
</tr>
</table>
<script type="text/javascript">
	var dice;

	var one = 0;
	var two = 0; 
	var three = 0;
	var four = 0; 
	var five = 0;
	var six = 0; 

	var i;

	for(i=1; i<=1000; i++) {

	dice = Math.floor(Math.random() * 6);
	
	if(dice==1) one++;
	else if(dice==2) two++;
	else if(dice==3) three++;
	else if(dice==4) four++;
	else if(dice==5) five++;
	else six++;

	} //end of for


	//write results to the table
  document.getElementById("r1").innerHTML = one;
	document.getElementById("r2").innerHTML = two;
	document.getElementById("r3").innerHTML = three;
	document.getElementById("r4").innerHTML = four;
	document.getElementById("r5").innerHTML = five;
	document.getElementById("r6").innerHTML = six;
	document.getElementById("sum").innerHTML = i;


</script>
</body>
</html>

【讨论】：

【解决方案2】：

head 中有 js 脚本，所以 document.getElementById("r1").innerHTML 这一行会在 dom 准备好之前尝试从 dom 获取元素。

尝试从头中删除脚本并将其放置在关闭正文标记附近，例如

<body>
  //html code

<script>
 //here your js
</script>
</body>

你也可以window.onload

【讨论】：

【解决方案3】：

您的脚本在元素进入 DOM 之前运行，因此您会收到错误消息。

未捕获的类型错误：无法将属性“innerHTML”设置为 null

要解决此问题，您可以使用DOMContentLoaded 包装您的代码：

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8"; http-equiv="Content-type">
<script type="text/javascript">
  window.addEventListener('DOMContentLoaded', (event) => {
     
    var dice;
    var one = 0;
    var two = 0; 
    var three = 0;
    var four = 0; 
    var five = 0;
    var six = 0; 

    var i;

    for(i=1; i<=1000; i++) {

    dice = Math.floor(Math.random() * 6);

    if(dice==1) one++;
    else if(dice==2) two++;
    else if(dice==3) three++;
    else if(dice==4) four++;
    else if(dice==5) five++;
    else six++;

    } //end of for


    //write results to the table
    document.getElementById("r1").innerHTML = one;
    document.getElementById("r2").innerHTML = two;
    document.getElementById("r3").innerHTML = three;
    document.getElementById("r4").innerHTML = four;
    document.getElementById("r5").innerHTML = five;
    document.getElementById("r6").innerHTML = six;
    document.getElementById("sum").innerHTML = i;
    });

</script>
</head>

<body>

<table border = "1">
<tr>
    <th>Face#</th>
    <th>Count</th> 
</tr>

<tr>
    <td>1</td>
    <td id="r1">0</td> 
</tr>

<tr>
    <td>2</td>
    <td id="r2">0</td> 
</tr>

<tr>
    <td>3</td>
    <td id="r3">0</td> 
</tr>

<tr>
    <td>4</td>
    <td id="r4">0</td> 
</tr>

<tr>
    <td>5</td>
    <td id="r5">0</td> 
</tr>

<tr>
    <td>6</td>
    <td id="r6">0</td> 
</tr>

<tr>
    <td>Sum</td>
    <td id="sum">0</td> 
</tr>
</table>

</body>
</html>

或者：将你的脚本移到正文的底部：

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8"; http-equiv="Content-type">

</head>

<body>

<table border = "1">
<tr>
    <th>Face#</th>
    <th>Count</th> 
</tr>

<tr>
    <td>1</td>
    <td id="r1">0</td> 
</tr>

<tr>
    <td>2</td>
    <td id="r2">0</td> 
</tr>

<tr>
    <td>3</td>
    <td id="r3">0</td> 
</tr>

<tr>
    <td>4</td>
    <td id="r4">0</td> 
</tr>

<tr>
    <td>5</td>
    <td id="r5">0</td> 
</tr>

<tr>
    <td>6</td>
    <td id="r6">0</td> 
</tr>

<tr>
    <td>Sum</td>
    <td id="sum">0</td> 
</tr>
</table>
<script type="text/javascript">
	var dice;

	var one = 0;
	var two = 0; 
	var three = 0;
	var four = 0; 
	var five = 0;
	var six = 0; 

	var i;

	for(i=1; i<=1000; i++) {

	dice = Math.floor(Math.random() * 6);
	
	if(dice==1) one++;
	else if(dice==2) two++;
	else if(dice==3) three++;
	else if(dice==4) four++;
	else if(dice==5) five++;
	else six++;

	} //end of for


	//write results to the table
  document.getElementById("r1").innerHTML = one;
	document.getElementById("r2").innerHTML = two;
	document.getElementById("r3").innerHTML = three;
	document.getElementById("r4").innerHTML = four;
	document.getElementById("r5").innerHTML = five;
	document.getElementById("r6").innerHTML = six;
	document.getElementById("sum").innerHTML = i;


</script>
</body>
</html>

【讨论】：