I have a simple HTML form, with 3 input field, when you hit = button, it suppose to add 2 numbers that you typed in the first 2 input fields and display result in 3rd filed. Is it possible to do that? (I need result in a box (or table) or some thing rather than in plain text). I try the following but doesn't work (it does nothing), can somebody help me?
<HTML>
<HEAD>
<TITLE>Sum</TITLE>
<script type="text/javascript">
function sum()
{
var num1 = document.myform.number1.value;
var num2 = document.myform.number2.value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('add').innerHTML = sum;
}
</script>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="number1" VALUE=""> +
<INPUT TYPE="text" NAME="number2" VALUE="">
<INPUT TYPE="button" NAME="button" Value="=" onClick="sum()">
<INPUT TYPE="text" ID="add" NAME="result" VALUE="">
</FORM>
</BODY>
</HTML>
innerHTML sets the text (including html elements) inside an element. Normally we use it for elements like div, span etc to insert other html elements inside it.
For your case you want to set the value of an input element. So you should use the value attribute.
Change innerHTML to value
document.getElementById('add').value = sum;
<HTML>
<HEAD>
<TITLE>Sum</TITLE>
<script type="text/javascript">
function sum()
{
var num1 = document.myform.number1.value;
var num2 = document.myform.number2.value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('add').value = sum;
}
</script>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="number1" VALUE=""/> +
<INPUT TYPE="text" NAME="number2" VALUE=""/>
<INPUT TYPE="button" NAME="button" Value="=" onClick="sum()"/>
<INPUT TYPE="text" ID="add" NAME="result" VALUE=""/>
</FORM>
</BODY>
</HTML>
This should work properly.
1. use .value instead of "innerHTML" when setting the 3rd field (input field)
2. Close the input tags
Do you really want the result to come up in an input box? If not, consider a table with borders set to other than transparent and use
document.getElementById('sum').innerHTML = sum;
With .value and INPUT tag
<HTML>
<HEAD>
<TITLE>Sum</TITLE>
<script type="text/javascript">
function sum()
{
var num1 = document.myform.number1.value;
var num2 = document.myform.number2.value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('add').value = sum;
}
</script>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="number1" VALUE=""/> +
<INPUT TYPE="text" NAME="number2" VALUE=""/>
<INPUT TYPE="button" NAME="button" Value="=" onClick="sum()"/>
<INPUT TYPE="text" ID="add" NAME="result" VALUE=""/>
</FORM>
</BODY>
</HTML>
with innerHTML and DIV
<HTML>
<HEAD>
<TITLE>Sum</TITLE>
<script type="text/javascript">
function sum()
{
var num1 = document.myform.number1.value;
var num2 = document.myform.number2.value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('add').innerHTML = sum;
}
</script>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="number1" VALUE=""/> +
<INPUT TYPE="text" NAME="number2" VALUE=""/>
<INPUT TYPE="button" NAME="button" Value="=" onClick="sum()"/>
<DIV ID="add"></DIV>
</FORM>
</BODY>
</HTML>
Related
I managed to resolve this issue with a different method but i still don't understand why this method didn't work in the first place, i am probably missing something:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
*{padding: 10px}
</style>
</head>
<body>
<script type="text/javascript">
function adding(){
var addnum1=parseInt(num1);
var addnum2=parseInt(num2);
var result=addnum1 + addnum2;
sum.value=result;
}
</script>
<input type="text" name="num1"><br>
<input type="button" value="+" disabled="true"><br>
<input type="text" name="num2"><br>
<input type="button" value="=" onclick="adding()"><br>
<input type="text" name="sum">
</body>
</html>
Here is a example of a jsfiddle that you can use to learn better.
https://jsfiddle.net/pxpmp45v/2/
JavaScript:
function adding(){
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var addnum1=parseInt(num1);
var addnum2=parseInt(num2);
var result= addnum1 + addnum2;
var sum = document.getElementById('sum');
sum.value=result;
}
Your HTML:
<input type="text" id="num1"><br>
<input type="button" value="+" disabled="true"><br>
<input type="text" id="num2"><br>
<input type="button" value="=" onclick="adding()"><br>
<input type="text" id="sum">
Few things to note while retrieving value and assigning to a textbox:
You must use getElementById method and assign a id attribute to your element.
<input type="text" id="num1">
You must also retrieve the value of that element in your JavaScript otherwise you will get a NaN. Use this document.getElementById('num2').value instead of document.getElementById('num2')
Debugging help: Try console.log which prints your variables to your browsers console thus helping you identify what is wrong.
While I have seen people accessing the values of inputs directly as global variables it not recommended. I would suggest using getElementsByName to access the values.
function adding(){
document.getElementsByName("sum")[0].value =
parseFloat(document.getElementsByName("num1")[0].value) +
parseFloat(document.getElementsByName("num2")[0].value);
}
<input type="text" name="num1"><br>
<input type="button" value="+" disabled="true"><br>
<input type="text" name="num2"><br>
<input type="button" value="=" onclick="adding()"><br>
<input type="text" name="sum">
num1, num2, and sum aren't declared in your javascript.
You could give them IDs like
<input type="text" id="num1">
<input type="text" id="num2">
<input type="text" id="sum">
And then access them with document.getElementById()
function adding(){
var addnum1 = parseInt(document.getElementById('num1').value);
var addnum2 = parseInt(document.getElementById('num2').value);
var result = addnum1 + addnum2;
document.getElementById('sum').value = result;
}
To learn and study JavaScript, im trying to do a calculator, and as start i tried to do a sum operation by taking 2 input. But somehow there is a problem that i cant see. Can you help me?
Here is the code:
<html>
<body>
<h1> JavaScript Test </h1>
Sum The Nums Up!
<br>
<form>
Number 1: <input type="text" name="n1" /><br>
Number 2: <input type="text" name="n2" /><br>
</form>
<button id="b" onclick="func();" />Sum</button>
<p id="b"></p>
<script type="text/javascript">
function sum() {
var nn1 = document.getElementById("n1").value;
var nn2 = document.getElementById("n2").value;
var sum = parseInt(nn1) + parseInt(nn2);
document.write(sum);
}
</script>
</body>
</html>
Replace:
function sum() {
With:
function func() {
This prevents you from assigning 2 different types / values to the same variable name.
(You've got an sum function and a sum variable in your question.)
Replace:
document.write(sum);
With
document.getElementById('b').innerHTML = sum;
This snippet adds the result of sum to <p id="b"></p> (So, the result may be: <p id="b">18</p>, for example), instead of arbitrarily adding it to the end of your HTML.
And finally, replace:
Number 1: <input type="text" name="n1"/><br>
Number 2: <input type="text" name="n2"/><br>
With:
Number 1: <input type="text" id="n1"/><br>
Number 2: <input type="text" id="n2"/><br>
document.getElementById looks for the id attribute in your HTML, not for the name.
There are two problems:-
Change onclick="func();" to onclick="sum();" , you are calling the wrong/undefined function.
<button id="b" onclick="sum();"/>Sum</button>
Assign input tags id as n1 and n2, you have assigned them as name and are referring to them based on id getElementById()
Number 1: <input type="text" id="n1"/><br>
Number 2: <input type="text" id="n2"/><br>
<html>
<body>
<h1> JavaScript Test </h1>
Sum The Nums Up!
<br>
<form>
Number 1: <input type="text" id="n1" name="n1"/><br>
Number 2: <input type="text" id="n2" name="n2"/><br>
</form>
<button id="b" onclick="sum();"/>Sum</button>
<p id="b"></p>
<script type="text/javascript">
function sum()
{
var nn1 = document.getElementById("n1").value;
var nn2 = document.getElementById("n2").value;
var sum = parseInt(nn1) + parseInt(nn2);
document.write(sum);
}
</script>
</body>
</html>
I am creating a small webpage that will add two input fields together and place the result in another input field. This is what I have:
<html>
<head>
<title>Calculator</title>
<script type="text/javascript">
function add(){
var num1 = parseInt(document.calc.num1.value);
var num2 = parseInt(document.calc.num2.value);
var answer = (num1+num2);
document.getElementById('res').value = answer;
}
</script>
</HEAD>
<BODY>
<FORM NAME="calc">
<INPUT TYPE ="button" NAME="add" Value="+" onClick="add()">
<hr/>
<INPUT TYPE ="text" NAME="num1" Value="">
<INPUT TYPE ="text" NAME="num2" Value="">
<hr/>
<INPUT TYPE ="text" ID="res" NAME="result" VALUE="">
</FORM>
</BODY>
</HTML>
And I am getting the following error when I press the + button.
Uncaught TypeError: object is not a function
Try changing the function name from add to addNumbers or something like that.
onclick is the right attribute to handle click
onClick="add()"
Switch this bit to
onclick="add()"
The problem is the name of the function "add()", change the name and you will see that it will works!
HTML
<p>
<label for="field1">Field 1</label>
<input type="number" id="field1"/>
</p>
<p>
<label for="field2">Field 2</label>
<input type="number" id="field2"/>
</p>
<p>
<label for="total">Total</label>
<input readonly type="number" id="total"/>
</p>
<p>
<input type="button" id="calc" value="Calculate"/>
</p>
Javascript
Goes in a script tag in head.
function sumFields(fields) {
var total = 0;
// goes through each field and adds them to the total
for(var i=0,l=fields.length; i<l; i++)
{ total += parseInt(document.getElementById(fields[i]).value); }
document.getElementById('total').value = total;
}
function calc_click() {
// runs when the button is clicked
sumFields(['field1','field2']);
}
// main function
function init() {
// add button functionality
document.getElementById('calc').addEventListener('click',calc_click,false);
}
// fires when the DOM is loaded
document.addEventListener('DOMContentLoaded',init,false);
Quick newbie question, i'm sure it is simple to you, but i cant get my head around to figure out why my code wont work. Checked online, seems that i'm doing everything fine, but still wont work... All i'm trying to do, is to make simple calc and display that in diff field. I have tryed external and internal JS.
Here's my code:
<script type="text/javascript">
function calculate(){
var a = document.calculate.first.value;
var b = document.calculate.second.value;
var c = parseInt(a) + parseInt(b);
document.calculate.result.value = c;
}
</script>
<body>
<form name="calculate">
<input type="text" name="first" size="5">
<input type="text" name="second" size="5">
<input type="button" onclick="calculate()">
<input type="text" name="result" id="result" size="5">
</form>
</body>
Chrome says:
Uncaught TypeError: object is not a function (onclick)
Give a different name to the form and the onclick handler! Here is a test.
Here is the corrected code :
<html>
<head>
<script type="text/javascript">
function calculate(){
var a = document.getElementById('first').value;
var b = document.getElementById('second').value;
var c = parseInt(a) + parseInt(b);
document.getElementById('result').value = c;
}
</script>
</head>
<body>
<form name="calculateform">
<input type="text" id="first" size="5">
<input type="text" id="second" size="5">
<input type="button" onclick="calculate()">
<input type="text" id="result" id="result" size="5">
</form>
</body>
</html>
Its probably because you are using the same name for the form as for your js function.
Working example:
<html>
<head>
<script type="text/javascript">
function calculate(){
alert(document.calculatex.first.value);
var a = document.calculatex.first.value;
var b = document.calculatex.first.value;
var c = parseInt(a) + parseInt(b);
document.calculatex.result.value= c;
}
</script>
</head>
<body>
<form name="calculatex">
<input type="text" name="first" size="5"/>
<input type="text" name="second" size="5"/>
<input type="button" value="calculate" onclick="calculate();"/>
<input type="text" name="result" id="result" size="5"/>
</form>
</body>
Have a look into JQuery library (convenient for getting/setting field values).
I try when I click on 1 button to have the value 1 in the first(blank) button but my code doesn't work and the value of first button become 1 before I click
HTML code
<html>
<head>
<title>
Exemplu
</title>
</script>
</head>
<body>
<form>
<input type="button" value="" id= "say_result"/>
</form>
<form>
<input type="button" value="1" id= "say_one"/>
</form>
<form>
<input type="button" value="2" id= "say_two"/>
</form>
<form>
<input type="button" value="+" id= "say_plus"/>
</form>
<form>
<input type="button" value="-" id= "say_minus"/>
</form>
<form>
<input type="button" value="=" id= "say_equal"/>
</form>
<script type="text/javascript" src=exemplu3.js></script>
</body>
</html>
Javascript code
function cifr(vallue){
var local_Value = vallue;
return document.getElementById("say_result").value = local_Value;
}
var oneButton = document.getElementById("say_one")
oneButton.onclick = cifr(1);
function two(){
document.getElementById("say_result").value = "2";
return 2;
}
var oneButton = document.getElementById("say_two")
oneButton.onclick = two;
In the following line:
oneButton.onclick = cifr(1);
You are calling the cifr function with the argument 1 and assigning the result to the oneButton click event.
This should probably be:
oneButton.onclick = function(){cifr(1);};