PDA

View Full Version : How to add numbers

cwl157
07-24-2003, 12:07 AM
Hi,
This is probably a dumb question but for some reason i can not figure out how to add numbers. I want to add numbers that the user inputs Here is the code i came up with

<script>
function a() {
var x=document.f.ad.value + document.f.ada.value
alert("The answer is "+x+"")
}
</script>
<form name="f">
add 2 numbers: 1st number<input type="text" name="ad">
2nd number<input type="text" name="ada">
<input type="button" value="add" onClick="a()">
</form>

Here is the problem. Lets say you enterd 100 for each of the text fields. It will display the answer as 100100 instead of 200 which is what should be displayed. Can someone tell me what I am doing wrong.
scriptkeeper
07-24-2003, 12:36 AM
The reason you are recieving 100100 as a value is because it is adding them together like a string not a integer! I dont know why maybe form values are automatically consider a string just make the needed changes to tell script that form values are to be treated as numbers. Try this good luck!


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

function addNums(){
num_1=Number(document.addition.entry_1.value);
num_2=Number(document.addition.entry_2.value);
valNum=num_1+num_2;
document.addition.endVal.value=valNum;
}
</script>
<form name="addition">
<input type="text" name="entry_1">+
<input type="text" name="entry_2">=
<input type="text" name="endVal">
<input type="button" value="add them" onclick="addNums()">
</form>
</body>
</html>
beetle
07-24-2003, 12:43 AM
When you pull values from form elements, they are always strings. So, you need to convert them to Numbers first. There are several ways of accomplishing this - the most common being parseInt()

var f = document.f;
var x = parseInt( f.ad.value, 10 ) + parseInt( f.ada.value, 10 );
scriptkeeper
07-24-2003, 12:47 AM
Bettle If at all possible for some of us less gifted scripters! Some examples of other ways this can be acomplished? The only that I know of is parseInt() is there a twin brother of .toString() maybe .toInteger()? Thanx:)
Vincent Puglia
07-24-2003, 01:01 AM
Here's one:

<form name='a'>
<input name="b" value='1'>
<input name="c" value='1'>
</form>
<script>
alert(eval(document.a.b.value) + eval(document.a.c.value))
</script>

Vinny
scriptkeeper
07-24-2003, 01:23 AM
Uh-oh infamous eval ahhhhh:eek: JK
I have never used eval simple cause of all the bashing! I dont even really know what its for?
beetle
07-24-2003, 02:27 AM
You bet I can.

Ya, don't use eval, although it does work.

You can cast a variable or result using Number() - but it acts quite a bit differently than parseInt(). First of all, Number() is for any number, not just integers. Lets look at some examples.var myString = "1a2";
var myNum1 = parseInt( myString );
var myNum2 = Number( myString );myNum1 now holds the integer 1. myNum2 holds NaN (in case you don't know, NaN means "Not a Number"). It should be clear that parseInt() scrubs the incoming data of non-numerical data that doesn't fit a literal scheme, whereas Number() does not.

Another difference by example. parseInt() and Number() handle the radix differently (both, however, always return a base 10 number). parseInt() allows you to include a 2nd parameter, the radix of the data that you are sending in. If you don't specify a radix, parseInt does it's best to determine the base by the value passed in. In contrast, Number always treats the incoming value as base 10 unless it is formatted as a valid integer literal (http://devedge.netscape.com/library/manuals/2000/javascript/1.5/guide/ident.html#1008351) or uses exponential notation.var myString = '0xE';
var myNum1 = parseInt( myString ); // parseInt assumes base of 16
var myNum2 = parseInt( myString, 10 ); // parseInt uses supplied base of 10
var myNum3 = Number( myString ); // sees leading '0x' and assumes number is hexadecimal, thus uses base 16After all this, our number variables hold the following valuesmyNum1 : 15
myNum2 : 0
myNum3 : 15
So, basically, both parseInt() and number() recognize literal number-patterns, except Number() ignores base 8 literal numbers (which, BTW, are now oficially deprecated by the ECMA). Another example of thisvar myString = '1e3';
var myNum1 = parseInt( myString );
var myNum2 = Number( myString );Since Number() recognizes exponential notation, and parseInt doesn't, myNum1 holds 1 whereas myNum2 holds 1000

Yet another examplevar myString = "0101";
var myNum1 = parseInt( myString ); // assumes octal, holds 65
var myNum2 = parseInt( myString, 2 ); // uses binary, holds 5
var myNum3 = parseInt( myString ); // assumes decimal, holds 101
Summary Both return a base 10 number, always
Both recognize hexadecimal literals, but only parseInt recognizes octal literals.
Number() will return integers or floats (decimals)
Number() recognizes exponential notation
parseInt() allows you to specify the incoming radix
parseInt() removes most non-numeric data to find a number
I think that should more than cover it :D
scriptkeeper
07-24-2003, 02:50 AM
WoW You more than covered it you smothered it! My Javascript Bible dosent even tell me that much info about them! What use do you have for hexadecimal literals, and octal literals in Javascript I dont really have much Knowledge on the subject. I need to go to school. LOL!"
cwl157
07-24-2003, 03:32 AM
Thanks alot everyone for helping me everyone. I did not even know about parseInt()
beetle
07-24-2003, 03:53 AM
Why hexadecimal literals? Well, what in HTML (and CSS) is expressed hexadecimally (okay, I'm making up words, just work with me).

Any guesses? COLOR!

Let's say we wanted to show all the grays between #000000 and #FFFFFF. Since a hex color is three pair of hexadecimal numbers, we can do this easily be iterating using hexadecimal literals.

function doColors()
{
var lowerBound = 0x00;
var upperBound = 0xFF;

for ( var i = lowerBound, color, hex, j; i <= upperBound; i++ )
{
j = ( i < 16 ) ? "0" + i.toString( 16 ) : i.toString( 16 );
hex = j.toUpperCase();
color = "#" + hex + hex + hex;
document.write( '<div style="color:' + color + '">' + color + '</div>' );
}
}

Of course, since (as I mentioned before) parseInt() always returns a base 10 number, so I have to convert it back to hex (using toString()) before utilizing it - but it works!