Question

我目前正在尝试制作一个程序，让您模拟一些骰子，并在表格中告诉您数字出现的次数和出现的百分比。

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title> Lab 2 </title>
</head>
<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    th, td {
        padding: 15px;
    }
</style>
<script>
    var face0=new Image()
    face0.src="d1.gif"
    var face1=new Image()
    face1.src="d2.gif"
    var face2=new Image()
    face2.src="d3.gif"
    var face3=new Image()
    face3.src="d4.gif"
    var face4=new Image()
    face4.src="d5.gif"
    var face5=new Image()
    face5.src="d6.gif"
    function throwDice(){
        var numSim = parseInt(form.numRoll.value);
        var theoryNum = numSim/6;
        var perSim = 100.00;
        var actualCount = [0,0,0,0,0,0];

        for(var x=1; x<7; ++x){
            document.getElementById("theory"+x).innerHTML = theoryNum;
            document.getElementById("theoryPer"+x).innerHTML = parseFloat((theoryNum/numSim)*100).toFixed(2);
        }
        document.getElementById("theory7").innerHTML = numSim;
        document.getElementById("theoryPer7").innerHTML = perSim;


        document.images["myDice1"].src=eval("face"+(Math.round(Math.random()*5))+".src")
        document.images["myDice2"].src=eval("face"+(Math.round(Math.random()*5))+".src")
        document.images["myDice3"].src=eval("face"+(Math.round(Math.random()*5))+".src")
        document.images["myDice4"].src=eval("face"+(Math.round(Math.random()*5))+".src")
        document.images["myDice5"].src=eval("face"+(Math.round(Math.random()*5))+".src")
        document.images["myDice6"].src=eval("face"+(Math.round(Math.random()*5))+".src")

        for(var x=0; x<numSim; ++x){
            var diceNum = 1+Math.floor(Math.random()*6);
            if(diceNum == 1) actualCount[0] += 1;
            if(diceNum == 2) actualCount[1] += 1;
            if(diceNum == 3) actualCount[2] += 1;
            if(diceNum == 4) actualCount[3] += 1;
            if(diceNum == 5) actualCount[4] += 1;
            if(diceNum == 6) actualCount[5] += 1;
        }

        for(var x=0; x<6; ++x){
            var numActualCount = actualCount[x];
            document.getElementById("actual"+x).innerHTML = ;
        }


    }



</script>
<body>

    <img src="d1.gif" name="myDice1">
    <img src="d2.gif" name="myDice2">
    <img src="d3.gif" name="myDice3">
    <img src="d4.gif" name="myDice4">
    <img src="d5.gif" name="myDice5">
    <img src="d6.gif" name="myDice6">

    <form name='form'>
        Number Of Times Rolled  <input type="number" name="numRoll" min="600" max="6000" value='900'> <br>
        <input type="button" value="Simulate" onClick="throwDice(this.form)">
    </form>

    <table style="width:50%">
      <tr>
        <th>Value</th>
        <th>Theory</th>
        <th>Theory%</th>
        <th>Actual</th>
        <th>Actual%</th>
        <th>Diff</th>
        <th>Diff%</th>
      </tr>
      <tr>
        <th>1</th>
        <td><div id="theory1"></div></td> 
        <td><div id="theoryPer1"></div></td>
        <td><div id="actual1"></div></td>
        <td><div id="actualPer1"></div></td> 
        <td><div id="diff1"></div></td>
        <td><div id="diffPer1"></div></td>
      </tr>
      <tr>
        <th>2</th>
        <td><div id="theory2"></div></td> 
        <td><div id="theoryPer2"></div></td>
        <td><div id="actual2"></div></td>
        <td><div id="actualPer2"></div></td> 
        <td><div id="diff2"></div></td>
        <td><div id="diffPer2"></div></td>
      </tr>
      <tr>
        <th>3</th>
        <td><div id="theory3"></div></td> 
        <td><div id="theoryPer3"></div></td>
        <td><div id="actual3"></div></td>
        <td><div id="actualPer3"></div></td> 
        <td><div id="diff3"></div></td>
        <td><div id="diffPer3"></div></td>
      </tr>
      <tr>
        <th>4</th>
        <td><div id="theory4"></div></td> 
        <td><div id="theoryPer4"></div></td>
        <td><div id="actual4"></div></td>
        <td><div id="actualPer4"></div></td> 
        <td><div id="diff4"></div></td>
        <td><div id="diffPer4"></div></td>
      </tr>
      <tr>
        <th>5</th>
        <td><div id="theory5"></div></td> 
        <td><div id="theoryPer5"></div></td>
        <td><div id="actual5"></div></td>
        <td><div id="actualPer5"></div></td> 
        <td><div id="diff5"></div></td>
        <td><div id="diffPer5"></div></td>
      </tr>
      <tr>
        <th>6</th>
        <td><div id="theory6"></div></td> 
        <td><div id="theoryPer6"></div></td>
        <td><div id="actual6"></div></td>
        <td><div id="actualPer6"></div></td> 
        <td><div id="diff6"></div></td>
        <td><div id="diffPer7"></div></td>
      </tr>
      <tr>
        <th>Summary</th>
        <td><div id="theory7"></div></td> 
        <td><div id="theoryPer7"></div></td>
        <td><div id="actual7"></div></td>
        <td><div id="actualPer7"></div></td> 
        <td><div id="diff7"></div></td>
        <td><div id="diffPer7"></div></td>
      </tr>
      <tr>
        <th colspan="7"><div id="timeDiv"> </div></th>
      </tr>
    </table>
</body>

现在的问题是它现在没有写入实际的div，而是用于理论div。

编辑：解决了不计数问题的数组。也显示完整的程序。

Answer 1

您需要初始化要添加的任何值。

目前你正在做，例如，

actualCount[0] += 1;

但actualCount[0]为undefined而undefined + 1为NaN。如果要添加值，则需要将所有数组值初始化为零。

JavaScript：添加到数组中的数字

1 个答案: