This tutorial demonstrates how to get two inputs from the user within a HTML page and have a button on the page to call a javascript method to process the inputs and alter the answer output on the web-page.
Within HTML, there are input tags that allow the user to input data that is passed either to a javascript method to validate the inputs (for example a registration forum) or to pass data back to the server (after the validation has taken place if required).
The value 1 input is defined as
value 1 = <input type=’text’ id=value1 name=’value1′ value=’1’/>
the input type is text, which means any textual value, [A-Z]*[0-9]* but in this case since just adding integers [0-9] would be the required input.
The id is for getting the value from the input with using javascript document.getElementById, value is for setting the default value.
The function within the javascript, addNumbers() will get the inserted value1 by using the javascript document object. Within this object there is a method called getElementById that returns back the object, which in turn using the .value of the object returned can be passed to the parseInt (which converts a string value into a integer value). The same method is used for the answer input within the web-page (getElementById) but assign the return object to a variable allows access to the .value to set the value on the web-page.
The source code is
<html> <head> <title>Input tutorial</title> <script language="javascript"> function addNumbers() { var val1 = parseInt(document.getElementById("value1").value); var val2 = parseInt(document.getElementById("value2").value); var ansD = document.getElementById("answer"); ansD.value = val1 + val2; } </script> </head> <body> value1 = <input type="text" id="value1" name="value1" value="1"/> value2 = <input type="text" id="value2" name="value2" value="2"/> <input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()"/> Answer = <input type="text" id="answer" name="answer" value=""/> </body> </html> |
save as addtwonumbers.html and then open in a web browser (e.g. FireFox)
This worked great. Great little easy script.
good code but try to generalize with multiplication,subtration,division with floation point numbers.
great! but now something confusing is that if you just change the operator differently from what is defined to the “function” in the fifth line from above and “javascript” in the fourth line from below it will still work. what i mean is that change the operator in “ansD.value” into say multiplication and leave the “function” and “javascript” as “addNumbers” it will still work! can anybody tell me what does that mean!
If you mean that you change the line..
ansD.value = val1 + val2;
to
ansD.value = val1 * val2;
then that is the functional aspects of the function itself and not the name of the function, the function name could be someMathsComputation because javascript does not really care what the name is as long as the functional aspects are in javascript code.
Not sure if that is what you was meaning, or if that helps ?
great job!it really help me thanks!!!
nps.. glad to be of help 🙂
I just wanna say Thank you very much………..
forgot basic js and this helped me today 🙂
Thanks Man it is really Helpfull !!
its too gudddddddd
any way to limit the number of decimal points – my outputting number for example is 12.33445555 and i just want to display 12.33
thanks
paul
Hi Paul,
Yeah.. you could use
number.toFixed(x) /// where x is the number of points you want to have.. in your case
number.toFixed(2) should work :).
i want display the numbers 1.0000 something in jsp page pls help
hi santhosh,
from memory you have to
import java.text.DecimalFormat;
and then create a decimal format variable
double priceToBeFormatted = 1.302;
DecimalFormat theFormatter = new DecimalFormat(“#0.00000”);
out.println(theFormatter.format(priceToBeFormatted);
HTH
Hi,
I
Input tutorial
function addNumbers()
{
var val1 = parseInt(document.getElementById(“value1”).value);
var val2 = parseInt(document.getElementById(“value2”).value);
var ansD = document.getElementById(“answer”);
ansD.value = val1 + val2;
}
value1 =
value2 =
Very Low
Low
Nominal
Hi
Very High
I cannot see your source code, but if you are using drop down lists like HTML select tags then you use something like
HTH
hi how r u
how add three numbers
for example this
function calc()
{
var val1= parseInt (document.getElementById(parseInt (“1”)).value);
var val2= parseInt (document.getElementById(parseInt (“2”)).value);
var val3= parseInt (document.getElementById(parseInt (“3”)).value);
var ansD = document.getElementById(“answer”);
ansD.value = val1 val3 val2;
}
value1 =
value2 =
value3 =
Answer =
plz check my this code plz
This should work
Not sure if, but the ansD.value = val1 val3 val2; is missing a “+” and also if you are wanting to pass in integer values instead then
hope that helps.
hi thx but i don’t need this is val1 and val3 is textfield
i mean is number field and value 2 is operator field in output
how many if enter in one coding Plz tell me
Arh.. I think that I now know what you mean,
should do the trict 🙂
I am using the eval method to eval(uate), which is basically like javascript code but you can insert textual data to create dynamic code as such.
how to i declare value in drop down
value is operator (+,-,*,/)
could use a
instead of a
<input>
type
its not working
k,, here is the source code for it to work 🙂
how i create a form in javascript plz tell me
to create a form in javascript, you just use the
and write the html code for your form of choice within the document.write method.
Hey guys am working on a similar code, but well the difference is that in my program the values keep getting added at every instant. So the value1 and value3 are first initialized to 0 and then on as and how they are changed the answer keeps changing dynamically without pressing the button. Need help guys seriously, I am having trouble in generating the answer dynamically without the button. Please HELP!
Hi Amrutha, do you have any sample code to look over ? probably best to understand the problem :).
No I dont :(. I am creating an application wherein you can enter values of the first two number and the answer automatically changes.
example:(At start) the values would be 0
+ 0
______
(So answer shown will also be) 0
But as soon as I change the value of the number say make the first one as 1 the answer displayed should be “1”, likewise if I keep changing it the answer reflects the same. So it would be value1+ 0=value1,
Similarly as and when I change value 3 the answer changes. And the change needs to happen very fast.
I am designing a math aid for kids and this is meant to be a tool for addition. Need help with code guys.
Input tutorial
function addNumbers()
{
var val1 = parseInt(document.getElementById(“value1”).value);
var operator = document.getElementById(“value2”).value;
var val3 = parseInt(document.getElementById(“value3”).value);
var ansD = document.getElementById(“answer”);
eval(“var ansForD = ” + val1 + operator + val3);
ansD.value = ansForD;
}
function displayManipulative()
{
var val1 = parseInt(document.getElementById(“value1”).value);
var val3 = parseInt(document.getElementById(“value3”).value);
var ansD = document.getElementById(“answer”);
var manip1= document.getElementById(“manip1”);
var manip2= document.getElementById(“manip2”);
var manip3= document.getElementById(“manip3”);
var manip4= document.getElementById(“manip4”);
switch(val1)
{
case 0:
break;
case 1:
manip1.value= desktop/banana.gif;
break;
case 2:
manip1.value= desktop/banana.gif;
manip2.value= desktop/banana.gif;
break;
case 3:
manip1.value= desktop/banana.gif;
manip2.value= desktop/banana.gif;
manip3.value= desktop/banana.gif;
break;
}
}
noibo
noibo
huuh
noibo
huuh
+
/
–
*
This is the code. I ts based on whatever has been discussed here. So basically I am trying to get rid of the button. And at the same time trying to generate manipulative based on the value entered in the right text boxes. All the operations need to take place quickly.
But firstly the button things aint working nor are the image manipulative getting generated :(…Please help!
K Sounds like what you want to is to have onchange function that will alter the numbers accord-lying, nps.. can it be jquery ? or do you prefer to just use pure javascript ? do you want to use the contact me page ? so that I can email you instead and then place the finish article on here.
ok well i dont mind whether its a javascript or jquery..but i jst need the addition to take place continuously…also need graphic that will represent the numbers and operations
Hi Amrutha,
I am using the onchange, to update the answer value once the values have been updated
HTH
plz tel me how to add two numbers and then multiply it with anothor var.
hi,
This salomi here ,
your script is good. working fine. it is flexible one.
Thank you so much.
all the best.
hi ehm,
i did some modification in that script u can refer this one.
Hi
I need ur help pls!
How can i use four operator
Not sure what you mean ? if you want to use four operators then just place them within the mathematical way.
javascript follows the same mathematical idea, so always best to place within brackets.
thank,s keep update
hi thanxxxxxxxxxxxxxxxxxxxxxxx
Thanks for the simple code.
The problem for me is what would be the code if I have a table with say 20 rows and in each row I want to do a separate addition between first field and second field of that row and get the result in the third field of that same row?
is there anyway to do this without defining 20 separate functions for each row?
thanks
Kinder depends on how to you are sending those rows to the web page ? if is dynamical done with php/c# etc then you would just output the third column via the server code.
If you are wanting to do it via javascript, then just need to reference the table colomns, and use a single function to add up the values. Using jquery may be easier with this sort of thing with its .parent() setup.
great!
this code work very well.and easy to understand………thanks for help
Thank u all….
It helps me a lot..
Thankx again
hey guys got guts to do with javascript
Hi , I have just read ur post today .. in the similar way i tried to write the code on my own and could able to execute it however i wont get the final output wen i click on a button .. everythin seems to be fine.. kindly let me know d reason for its failure…
the code is as follows …
Add two numbers
function add()
{
//document.write(“hello”);
var val1 = parseInt(document.getElementById(‘value1’).value);
var val2 = parseInt(document.getElementById(‘value2’).value);
var sum = parseInt(document.getElementById(‘sum’));
sum.value = val1 + val2;
}
value1 =
value2 =
sum =
Hi Giridhar
I would say it is because you are not outputing the result, e.g.
document.write(val1+val2);
or if you are if trying to update the web page document then
var sum = document.getElementById(“sim”);
sum.value = val1 + val2;
HTH
genux