0

さて、このサイトのユーザー ユーザーのおかげで、JavaScript 関数からのデータを html テーブルに記録することができました。ここで、もう 1 つ質問があります。ページの読み込み中に関数を複数回実行し、その 1 つの関数からの出力を同じ html テーブルに記録するにはどうすればよいですか? 私のコードは現在、関数の出力を一度だけ実行してログに記録しているため、ページを更新すると、以前に生成された数値が失われます。関数を 10 回実行して、それを html テーブルに表示できるようにしたいと考えています。どうぞよろしくお願いいたします。

<html>
<head>
</head>
    <body>
        <script type="text/javascript" language="javascript">
            R = 10;
            theta = Math.random() * 2 * Math.PI;
            r1 = Math.random() * R;
            r2 = R + (Math.random() * 100);
            ray = r1 + (Math.random() * (r2 - r1));
            point = [ray*Math.cos(theta), ray*Math.sin(theta)];


            var distance = function(x1, y1, rad, x2, y2) {
                return (Math.sqrt(Math.pow((y2 - y1), 2) + Math.pow((x2 - x1), 2))) - rad;
            };

        </script>

    <div>
            <table border="1">
                <th>X Center</th>
                <th>Y Center</th>
                <th>r1</th>
                <th>r2</th>
                <th>X Random</th>
                <th>Y Random</th>
                <th>Distance</th>
                <tr>
                    <td><input type="text" id="x center"/></td>
                    <td><input type="text" id="y center"/></td>
                    <td><input type="text" id="r1"/></td>
                    <td><input type="text" id="r2"/></td>
                    <td><input type="text" id="x random"/></td>
                    <td><input type="text" id="y random"/></td>
                    <td><input type="text" id="displacement"/></td>
                </tr>

            </table>
        <script>
            document.getElementById("x center").value = 0;
            document.getElementById("y center").value = 0;
            document.getElementById("r1").value = r1;
            document.getElementById("r2").value = r2;
            document.getElementById("x random").value = point[0];
            document.getElementById("y random").value = point[1];
            document.getElementById("displacement").value = distance(0,0,R,point[0], point[1]);
        </script>
    </div>
  </body>
</html>
4

1 に答える 1

1

これはあなたが望んでいたものです：

<html>

    <head></head>

    <body>
        <div>
            <table border="1">
                <thead>
                    <tr>
                        <th>X Center</th>
                        <th>Y Center</th>
                        <th>r1</th>
                        <th>r2</th>
                        <th>X Random</th>
                        <th>Y Random</th>
                        <th>Distance</th>
                    </tr>
                </thead>
                <tbody id="log"></tbody>
            </table>
        </div>
        <script>
            for (var i = 0; i < 10; i++) {
                addRow();
            }

            function addRow() {
                var R = 10;
                var theta = Math.random() * 2 * Math.PI;
                var r1 = Math.random() * R;
                var r2 = R + (Math.random() * 100);
                var ray = r1 + (Math.random() * (r2 - r1));
                var point = [ray * Math.cos(theta), ray * Math.sin(theta)];
                var dist = distance(0, 0, R, point[0], point[1]);

                var newRow =
                    "<tr>" +
                    "<td>" + 0 + "</td>" +
                    "<td>" + 0 + "</td>" +
                    "<td>" + r1 + "</td>" +
                    "<td>" + r2 + "</td>" +
                    "<td>" + point[0] + "</td>" +
                    "<td>" + point[1] + "</td>" +
                    "<td>" + dist + "</td>" +
                    "</tr>";
                document.getElementById("log").innerHTML += newRow;
            }

            function distance(x1, y1, rad, x2, y2) {
                return (Math.sqrt(Math.pow((y2 - y1), 2) + Math.pow((x2 - x1), 2))) - rad;
            };
        </script>
    </body>
于 2013-06-25T18:13:14.953 に答える