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

问题描述 投票：1回答：3

我正在试图弄清楚如何使用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>
javascript
3个回答
0
投票

您的脚本在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>
0
投票

你有head里面的js脚本所以这行document.getElementById("r1").innerHTML将尝试从dom中获取一个元素，即使在dom准备好之前。

尝试从头部删除脚本并将其放置在关闭身体标签附近

<body>
  //html code

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

另外你也可以window.onload

0
投票

您的脚本在元素位于DOM之前运行，因此您收到错误。

未捕获的TypeError：无法设置null的属性'innerHTML'

要解决此问题，您可以使用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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.