Question

我试图弄清楚如何使用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>

Answer 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>

Answer 2

您在head中拥有js脚本，因此即使在dom准备就绪之前，这一行document.getElementById("r1").innerHTML也会尝试从dom中获取元素。

尝试从头部移除脚本并将其放置在靠近主体标签的位置，例如

<body>
  //html code

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

否则，您也可以window.onload

Answer 3

您的脚本在元素进入DOM之前就已运行，因此会出现错误。

未捕获的TypeError：无法将属性'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>

OR：：将您的 script 移动到正文底部：

<!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>

使用Javascript写入表格？我在做什么错了？

3 个答案: