Jump to content

# calculating the total value of numbers in a textarea

## Recommended Posts

I have some code that gives me the sum of numbers in a textarea (see below), but it only works on the first line.1) If there are more then one spaces between numbers it gives an error 2) If there is a space before the first number it also gives an error3) It only adds up the numbers on the first lineI basically want it to give me the sum of all numbers in the textarea irrespective of spaces between them or lines separating them.Any help will be appreciated </html><head><meta http-equiv='Content-type' content='text/html;charset=UTF-8'><title>Calc Numbers</title><script type='text/javascript'>function calc() {// calc() is designed to sum numbers entered in an input fieldvar t = document.getElementById("num").value; // the numbers enteredvar numbers = new Array();numbers = t.split(' '); // the numbers extracted from the stringvar sum = 0; // variable to hold the sum of the numbersvar num = ''; // string to hold a list of the numbersif (numbers.length == 1) { num = '0'; } // to add single number tofor (i = 0; i < numbers.length; i++) {sum = sum + eval(numbers); // add this numberif (i == numbers.length - 1) { num = num + " and ";} // last number?else { if (i > 0) { num = num + ", "} } // otherwise if not 1st, join with ,num = num + numbers; // and add the number to the list}// create the text to display with the resultresult = "<p>The sum of the numbers " + num + " is " + sum +"<"+"/p>";// find the placeholder for displaying the resultvar resElement = document.getElementById("res");// display the resultresElement.innerHTML = result;}</script></head><body><h1>Calc Numbers</h1><p>Enter some numbers separated by spaces:</p><textarea id='num' onclick="this.value=''" onchange='calc()' cols = 65 rows = 5 wrap="PHYSICAL"></textarea><!-- provide a dummy button - encourage user to leave input tag --><input type="button" value="Calc"><!-- the following div id='res' provides a placeholderthat calc() can use to display the result --><div id='res'></div></body></html>

##### Share on other sites

Instead of searching for a space character in your split method, pass split a regular expression that looks for spaces and line breaks:numbers = t.split(/\s*/);

##### Share on other sites

Awesome it Worked!Thank you

##### Share on other sites

Thanks DD,It has solved the problem of the spaces, but have encounted another problem in the result, for some reason my function is not recognizing double digit numbers it converts them to single digits e.g "23 4 55" it converts to "2+3+4+5+5=19" and not "23+4+55=82"<head><script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script><meta http-equiv='Content-type' content='text/html;charset=UTF-8'><title>Calc Numbers</title><script type='text/javascript'>function calc() {// calc() is designed to sum numbers entered in an input fieldvar t = document.getElementById("num").value; // the numbers enteredvar numbers = new Array();numbers = t.split(/\s*/); // the numbers extracted from the stringvar sum = 0; // variable to hold the sum of the numbersvar num = ''; // string to hold a list of the numbersif (numbers.length == 1) { num = '0'; } // to add single number tofor (i = 0; i < numbers.length; i++) {sum = sum + eval(numbers); // add this numberif (i == numbers.length - 1) { num = num + " and ";} // last number?else { if (i > 0) { num = num + ", "} } // otherwise if not 1st, join with ,num = num + numbers; // and add the number to the list}// create the text to display with the resultresult = "<p>The sum of the numbers " + num + " is " + sum +"<"+"/p>";// find the placeholder for displaying the resultvar resElement = document.getElementById("res");// display the resultresElement.innerHTML = result;}</script></head><body><h1>Calc Numbers</h1><p>Enter some numbers separated by spaces:</p><textarea id='num' onclick="this.value=''" onchange='calc()' cols = 65 rows = 5 wrap="PHYSICAL"></textarea><!-- provide a dummy button - encourage user to leave input tag --><input type="button" value="Calc"><!-- the following div id='res' provides a placeholderthat calc() can use to display the result --><div id='res'></div></body>

##### Share on other sites

http://www.w3schools.com/jsref/jsref_parseint.aspnum = new Array();sum = 0;for (i = 0; i < numbers.length; i++) sum+=num=parseInt(numbers);
##### Share on other sites

Thanks for help I am almost there but stuck at the last hurdle, in the input field you can enter spaces any where and any amount of spaces between the numbers and the result returns a list of the numbers with a single space separating them which is great I now just want to calculate the sum of the result ?? have spent hours trying to do this but cant get scrip or figure out how to do it, will be most great full if some body can do this for me Many thanks<head><script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script><meta http-equiv='Content-type' content='text/html;charset=UTF-8'><title>Calc Numbers</title><script type='text/javascript'>function calc() {// calc() is designed to sum numbers entered in an input fieldvar t = document.getElementById("num").value; // the numbers enteredvar numbers = new Array();numbers = t.split(" "); // the numbers extracted from the stringvar sum = 0; // variable to hold the sum of the numbersvar num = ''; // string to hold a list of the numbersif (numbers.length == 1) { num = '0'; } // to add single number tofor (i = 0; i < numbers.length; i++) {sum = sum + eval(numbers); // add this numberif (i == numbers.length - 1) { num = num + " ";} // last number?else { if (i > 0) { num = num + " "} } // otherwise if not 1st, join with ,num = num + numbers; // and add the number to the list}// create the text to display with the resultresult = num +"<"+"/p>";// find the placeholder for displaying the resultvar resElement = document.getElementById("res");// display the resultresElement.innerHTML = result;}</script></head><body><h1>Calc Numbers</h1><p>Enter some numbers separated by spaces:</p><textarea id='num' onclick="this.value=''" onchange='calc()' cols = 65 rows = 5 wrap="PHYSICAL"></textarea><!-- provide a dummy button - encourage user to leave input tag --><input type="button" value="Calc"><!-- the following div id='res' provides a placeholderthat calc() can use to display the result --><div id='res'></div></body>

Edited by Tusk
##### Share on other sites

try something like thisfunction calc() {// calc() is designed to sum numbers entered in an input fieldvar t = document.getElementById("num").value; // the numbers enteredvar numbers = new Array();numbers = t.split(" "); // the numbers extracted from the stringvar sum = 0; // variable to hold the sum of the numbersvar num = ''; // string to hold a list of the numbersif (numbers.length == 1) { num = '0'; } // to add single number tofor (i = 0; i < numbers.length; i++) {sum = sum + eval(numbers); // add this number//if (i == numbers.length - 1) { num = num + "=";} // last number?//else { if (i > 0) { num = num + " + "} } // otherwise if not 1st, join with ,//num = num + numbers; // and add the number to the list//}// create the text to display with the resultif (numbers.length==1){num = numbers;}else if(i != numbers.length-1){num = num + numbers + " + ";}else{num = num + numbers +" = "+sum;}}result = num;// find the placeholder for displaying the resultvar resElement = document.getElementById("res");// display the resultresElement.innerHTML = result;}

Edited by dsonesuk
##### Share on other sites

Thanks all, this is the putting "+" where the "*" was in DD's suggestion did the trick, appreciate all the helpnumbers = t.split(/\s+/);

##### Share on other sites

Oops. The + modifier means 1 or more times, while the * operator means 0 or more times. So using the * split the string at every character. my bad.

##### Share on other sites

• 2 weeks later...

DD, I still get a NAN result if I have a space before the first digit or after the last digit, is there a simple way of fixing that?

##### Share on other sites

parseInt("5") parseInt(" 5") parseInt("5 ") all return 5 as an integer

##### Share on other sites

Hi DD, there are a few versions of the post so have cleaned up the one I am using and show it below. In the textarea I can have multiple spaces or CR between numbers and it works giving me their sum But if i have a space before the first number or after the last number I get a NAN <html> <head> <title>Calc Numbers</title><script type='text/javascript'>function calc() {var t = document.getElementById("digit").value;var numbers = new Array();numbers = t.split(/\s+/);var sum = 0;var num = '';if (numbers.length == 1) { num = '0'; }for (i = 0; i < numbers.length; i++) {sum = sum + eval(numbers); if (i == numbers.length - 1) { num = num + " and ";} else { if (i > 0) { num = num + ", "} } num = num + numbers; }result = + sum +"<"+"/p>";var resElement = document.getElementById("res");resElement.innerHTML = result;}</script></head> <form> <textarea id='digit' onclick="this.value=''" onchange='calc()'cols = 65 rows = 5 ></textarea><br>  <input type="button" name="b1" value="Click" onClick = "calc()"> <span><div id='res'></div></span> </form> </html>

##### Share on other sites

I can get it to work by replacing eval in this line:sum = sum + eval(numbers);with Number:sum = sum + Number(numbers);eval has very limited uses and this is not one of them. You should be using casting techniques such as Number() or parseInt(). The reason you get NaN is because your trying to eval a blank string ("") and I'm not sure what the return value of that is but it's not a number, so any calculation done with it will return NaN.

Edited by ShadowMage
##### Share on other sites

Thanks ShadowMage!!!You guys are brilliant

## Create an account or sign in to comment

You need to be a member in order to leave a comment

## Create an account

Sign up for a new account in our community. It's easy!

Register a new account

## Sign in

Already have an account? Sign in here.

Sign In Now
×
×
• Create New...