How do you parse a split() textarea?

CAO · 03-08-2012, 02:42 AM

Hey
I'm trying to create an aggregates calculator where the sum & average are calculated from the user inputs textarea of values, which i have split(). This is my code so far. I'm sure I'm not using the variables or parseFloat method correctly.
Any advise?
Many Thanks

<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
<h1>Aggregates</h1>

<h3>Add as many numbers as you like<br>to the list,then click Calculate.</h3>

<form name="entryForm" id="entryForm">

<input type="text" id="num1"></input>

<input type="button" value="Add to list" onclick="add();"><br>

<textarea name="text" rows="15" cols="20" readonly="readonly" id="answer"></textarea><br>

<input type="button" value="Calculate" onclick="calculate">

<input type="reset" value="Reset">

<p>Total (Sum);</p>

<input type="text" id="sum" value="0"><br>

<p>Average :</p>

<input type="text" id="average" value="0">

</form>

</body>
</html>

webdev1958 · 03-08-2012, 03:25 AM

1) You have syntax and logic errors, but overall you are reasonably close.

2) In the future, posted code is much easier to read if you wrap the code in code tags by first highlighting your code and then click the # icon in the editor's toolbar.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript">
            function add(){
                document.getElementById("answer").value+=(document.getElementById("num1").value) + "\n";
                document.getElementById("num1").value = '';
                document.getElementById("num1").focus();
            }
            function calculate(){
                var total = 0, numCount = 0;
                var sa = document.getElementById('answer').value.split("\n"); 
                for (var i=0; i < sa.length; i++) {
                    if(!isNaN(parseFloat(sa[i]))){
                        total += parseFloat(sa[i]);
                        ++numCount;
                    }
                }
                    document.getElementById("sum").value = total;
                    document.getElementById("average").value = total / numCount;
            }
        </script>
    </head>
    <body>
        <h1>Aggregates</h1>

        <h3>Add as many numbers as you like<br>to the list,then click Calculate.</h3>

        <form name="entryForm" id="entryForm">

            <input type="text" id="num1" />

            <input type="button" value="Add to list" onclick="add();"><br />

                <textarea rows="15" cols="20" readonly="readonly" id="answer"></textarea><br />

                <input type="button" value="Calculate" onclick="calculate();" />

                <input type="reset" value="Reset" />

                <p>Total (Sum);</p>

                <input type="text" id="sum" value="0" /><br />

                <p>Average :</p>

                <input type="text" id="average" value="0" />

        </form>
    </body>
</html>

CAO · 03-08-2012, 04:08 AM

webdev1958 THANK YOU!

I've spent about 40 hours trying to figure this out and will now spend another 40 studying your code until I completely understand it.

Much appreciated.

webdev1958 · 03-08-2012, 10:05 AM

Quote:

Originally Posted by CAO

webdev1958 THANK YOU!

glad to have helped. Google should help explain anthing you're not sure of, but if you need more help or explanation, post back

yifangt · 11-17-2012, 12:52 AM

Do you by chance have perl CGI version to do the same thing? I was struggling with this in perl CGI. Thank you in advance!
Tany

Old Pedant · 11-17-2012, 01:11 AM

Post in the PERL forum.

But it will be *nothing* like the JavaScript version.

It will have to process SUBMITTED data, no data that is live in the browser.