Log multiple JavaScript function data outputs in an html table

Question

Well, thanks to a user user on this site, I was able to log some data from a JavaScript function into an html table. Now I have another question to ask. How can I run the function multiple times while the page is loading and log the output from that one function into the same html table? Because my code as of now only runs and logs the output of the function once, and when I refresh the page I lose the numbers which were previously generated. I want to be able to run the function say 10 times and display that on the html table. Your help would be greatly appreciated.

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

do you want a table with 10 rows if the function runs 10 times? or just the last value? — Sergio
– Sergio, Commented Jun 25, 2013 at 17:32
yes, ten rows corresponding to the ten times the function ran — user2517142
– user2517142, Commented Jun 25, 2013 at 17:33
You are overwriting the same element all the time. You need to append a new tr with all the tds to the table. — Balint Bako
– Balint Bako, Commented Jun 25, 2013 at 17:58
no, the code runs as I want it to. all of those cells are in the same row because they are all from the same event. — user2517142
– user2517142, Commented Jun 25, 2013 at 18:06
You are calling the event only once and again you are setting the values of the same fields. — Balint Bako
– Balint Bako, Commented Jun 25, 2013 at 18:16

Balint Bako · Accepted Answer · 2013-06-25 18:13:14Z

This is what you wanted:

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

Thanks a million, Balint. I was thinking I could use a for loop but i just wasn't sure if that would be viable while using html. — user2517142
– user2517142, Commented Jun 25, 2013 at 18:15

Collectives™ on Stack Overflow

Log multiple JavaScript function data outputs in an html table

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related