hello im new and learning javascript.
I'm trying to make a program of addition through text field.
Check the html code on js fiddle /
What I need to know is how can I accept user input in text field and diplay output in P tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<input id="value1" type="text" />
<span> + </span>
<input id="value2" type="text" />
<input type="submit" onclick="output();">
<p id="result"> </p>
<script type="text/javascript" language="javascript" charset="utf-8">
var value1 = document.getElementById('value1').innerHTML;
var value2 = document.getElementById('value2').innerHTML;
function output(){
document.getElementById('result').innerHTML = value1 + value2;
}
</script>
</body>
</html>
hello im new and learning javascript.
I'm trying to make a program of addition through text field.
Check the html code on js fiddle http://jsfiddle/fCXMt/
What I need to know is how can I accept user input in text field and diplay output in P tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<input id="value1" type="text" />
<span> + </span>
<input id="value2" type="text" />
<input type="submit" onclick="output();">
<p id="result"> </p>
<script type="text/javascript" language="javascript" charset="utf-8">
var value1 = document.getElementById('value1').innerHTML;
var value2 = document.getElementById('value2').innerHTML;
function output(){
document.getElementById('result').innerHTML = value1 + value2;
}
</script>
</body>
</html>
6 Answers
Reset to default 3You have to grab the values in input fields after the button click, and use the value property (not innerHTML) to do it. Also, make sure you're adding numbers and not appending strings together. Try this:
function output(){
var value1 = document.getElementById('value1').value;
var value2 = document.getElementById('value2').value;
document.getElementById('result').innerHTML = parseInt(value1) + parseInt(value2);
}
The property for getting the value of a textbox is value, not innerHTML, so change those, and you will also need to use eval or parseInt on the textbox values, otherwise it will concatenate them as strings.
Also, you need to move your variable declarations inside the function, so that when the function is called, the current values from the textboxes are retreived.
See update fiddle here.
You need to access the "value" property of the input fields and parse them as integers:
var value1 = parseInt(document.getElementById('value1').value);
var value2 = parseInt(document.getElementById('value2').value);
You only read the values once, you should read them in the output function; You need to parse them to integers as well since 1+4 will bee 14 if you use strings. Could be better but this should work.
<script type="text/javascript" language="javascript" charset="utf-8">
function output(){
var value1 = parseInt(document.getElementById('value1').value);
var value2 = parseInt(document.getElementById('value2').value);
document.getElementById('result').innerHTML = value1 + value2;
}
</script>
For pleteness: your scripting could be better. Based on your form I cooked up another jsfiddle example.
While getting value, just multiple it by 1, it will parse the value into number
const value1 = document.getElementById('value1').innerHTML.value * 1;
const value2 = document.getElementById('value2').innerHTML.value * 1;
document.getElementById('result').innerHTML = value1 + value2;