为什么我的数学问题没有出现在屏幕上?

时间:2014-04-24 06:38:50

标签: javascript

我在显示我在javascript中创建的数学问题时遇到了问题。我不确定我是否遗漏了某些东西,或者我是否需要取出一些东西。我很感激任何有关此事的帮助或意见,这让我感到难过。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Interactive Math Worksheet</title>
    <script type="text/javascript">
    var mathProblem = new Array();
    // writing the problem 10 times

    function writeProblem() {
        var num1 = new Array();
        var num2 = new Array();
        for (var i = 0; i < 10; i++) {
           num1 = (Math.floor(Math.random() * 50) + 1);
           num2 = (Math.floor(Math.random() * 50) + 1);
           document.getElementById("t" + i).innerHTML = num1;
           document.getElementById("b" + i).innerHTML = "+" + num2;
           mathProblem[i] = num1 + num2;
           document.forms["prob" + i]["a" + i].value = "";
        }
    }
    </script>
</head>
<body onload="writeProblem()">
    <table border="0" cellspacing="50" id="frm1" width="800">
        <tr>
            <td width="50">
                <label id="t1"></label><br>
                <label id="b1"></label><br>
                <hr>

                <form name="prob1">
                    <input name="a1" size="3" type="text">
                </form>
            </td>

            <td width="50">
                <label id="t2"></label><br>
                <label id="b2"></label><br>
                <hr>

                <form name="prob2">
                    <input name="a2" size="3" type="text">
                </form>
            </td>

            <td width="50">
                <label id="t3"></label><br>
                <label id="b3"></label><br>
                <hr>

                <form name="prob3">
                    <input name="a3" size="3" type="text">
                </form>
            </td>

            <td width="50">
                <label id="t4"></label><br>
                <label id="b4"></label><br>
                <hr>

                <form name="prob4">
                    <input name="a4" size="3" type="text">
                </form>
            </td>

            <td width="50">
                <label id="t5"></label><br>
                <label id="b5"></label><br>
                <hr>

                <form name="prob5">
                    <input name="a5" size="3" type="text">
                </form>
            </td>
        </tr>

        <tr>
            <td>
                <label id="t6"></label><br>
                <label id="b6"></label><br>
                <hr>

                <form name="prob6">
                    <input name="a6" size="3" type="text">
                </form>
            </td>

            <td>
                <label id="t7"></label><br>
                <label id="b7"></label><br>
                <hr>

                <form name="prob7">
                    <input name="a7" size="3" type="text">
                </form>
            </td>

            <td>
                <label id="t8"></label><br>
                <label id="b8"></label><br>
                <hr>

                <form name="prob8">
                    <input name="a8" size="3" type="text">
                </form>
            </td>

            <td>
                <label id="t9"></label><br>
                <label id="b9"></label><br>
                <hr>

                <form name="prob9">
                    <input name="a9" size="3" type="text">
                </form>
            </td>

            <td>
                <label id="t10"></label><br>
                <label id="b10"></label><br>
                <hr>

                <form name="prob10">
                    <input name="a10" size="3" type="text">
                </form>
            </td>
        </tr>
    </table>
</body>
</html>

3 个答案:

答案 0 :(得分:1)

我注意到你是从i=0;getElementById("t"+i)开始的,没有名为t0的元素。希望有帮助

答案 1 :(得分:0)

您的ids以t0 / b0开头,因此您必须从1开始更改索引:

 for (var i=1; i<=10; i++){

<强> The DEMO.

答案 2 :(得分:0)

只需检查for循环。我已经解决了这个问题。

<!doctype html>
        <html>
        <head>
        <meta charset="UTF-8">
        <title>Interactive Math Worksheet</title>
        <script type="text/javascript">
        var mathProblem = new Array();
        // writing the problem 10 times
        function writeProblem(){
            var num1 = new Array();
            var num2 = new Array();
            for (var i=1; i<11; i++){
                num1 = (Math.floor(Math.random()*50)+1);
                num2 = (Math.floor(Math.random()*50)+1);
                document.getElementById("t"+i).innerHTML = num1;
                document.getElementById("b"+i).innerHTML = "+" + num2;
                mathProblem[i] = num1 + num2;
                document.forms["prob"+i]["a"+i].value = "";
        }
        }
        </script>
        </head>

        <body onload="writeProblem()">
        <table id="frm1" width="800" border="0" cellspacing="50">

           <tr>

        <td width="50"><label id="t1"></label><br /><label id="b1"></label><br /><hr /><form         name="prob1"><input type="text" size="3" name="a1"></form></td>

        <td width="50"><label id="t2"></label><br /><label id="b2"></label><br /><hr /><form name="prob2"><input type="text" size="3" name="a2"></form></td>

        <td width="50"><label id="t3"></label><br /><label id="b3"></label><br /><hr /><form name="prob3"><input type="text" size="3" name="a3"></form></td>

        <td width="50"><label id="t4"></label><br /><label id="b4"></label><br /><hr /><form name="prob4"><input type="text" size="3" name="a4"></form></td>

        <td width="50"><label id="t5"></label><br /><label id="b5"></label><br /><hr /><form name="prob5"><input type="text" size="3" name="a5"></form></td>

      </tr>

      <tr>

        <td><label id="t6"></label><br /><label id="b6"></label><br /><hr /><form name="prob6"><input type="text" size="3" name="a6"></form></td>

        <td><label id="t7"></label><br /><label id="b7"></label><br /><hr /><form name="prob7"><input type="text" size="3" name="a7"></form></td>

        <td><label id="t8"></label><br /><label id="b8"></label><br /><hr /><form name="prob8"><input type="text" size="3" name="a8"></form></td>

        <td><label id="t9"></label><br /><label id="b9"></label><br /><hr /><form name="prob9"><input type="text" size="3" name="a9"></form></td>

        <td><label id="t10"></label><br /><label id="b10"></label><br /><hr /><form name="prob10"><input type="text" size="3" name="a10"></form></td>

        </tr>

        </table>

         </body>
         </html>