compute sum dynamically with javascript - javascript

I have two textboxes Num1 and Num2 and another textbox Sum having the value 10.
How can I do this wherein if the user will enter a number for Num1, it will add it to Sum and dynamically change the displayed number in the Sum textbox. If the user will enter a number in Num2 it will also add that number to the updated number shown in Sum textbox and dynamically change the value for Sum textbox also.
How to do this in Javascript?

Something like that:
<input type="text" id="Num1" value="1" onblur="recalculateSum();"/>
<span>+</span>
<input type="text" id="Num2" value="1" onblur="recalculateSum();"/>
<span>=</span>
<input type="text" id="Sum" value=""/>
<script>
function recalculateSum()
{
var num1 = parseInt(document.getElementById("Num1").value);
var num2 = parseInt(document.getElementById("Num2").value);
document.getElementById("Sum").value = num1 + num2;
}
</script>

Another version.
<!DOCTYPE html>
<html>
<head>
<title>Summer</title>
</head>
<body>
Num 1: <input type="text" id="num1" name="num1" value="4"/&gt<br />
Num 2: <input type="text" id="num2" name="num2" value="6"/&gt<br />
Sum <input type="text" id="sum" name="sum" value="10">
<script type="text/javascript">
var _num1 = document.getElementById('num1');
var _num2 = document.getElementById('num2');
var _sum = document.getElementById('sum');
_num1.onblur = function(){
_sum.value = (parseInt(_sum.value,10) + parseInt(this.value,10));
};
_num2.onblur = function(){
_sum.value = (parseInt(_sum.value,10) + parseInt(this.value,10));
};
</script>
</body>
</html>

<input type="text" id="Num1" name="Num1"/>
<input type="text" id="Num2" name="Num2"/>
<input type="text" id="Sum" name="Sum"/>
function addNums() {
var num1 = parseInt(document.getElementById('Num1').value,10);
var num2 = parseInt(document.getElementById('Num2').value,10)
document.getElementById('Sum').value = (num1 + num2).toString();
}
There are other ways to reference the form items, but this one works.

<input type="text" id="Num1" value="1" onblur="recalculateSum();"/>
<input type="text" id="Num2" value="1" onblur="recalculateSum();"/>
<input type="text" id="Sum" value=""/>
<script>
function recalculateSum()
{
var num1 = parseInt(document.getElementById("Num1").value);
var num2 = parseInt(document.getElementById("Num2").value);
document.getElementById("Sum").value = num1 + num2;
}
</script>

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(){
var x=parseInt(document.getElementById("first").value);
var y=parseInt(document.getElementById("second").value);
document.getElementById("answer").value=(x+y);
}
</script>
<title>exam</title>
</head>
<body>
<form>
First:<input id="first" name="first" type="text"><br>
Second:<input id="second" name="second" type="text"><br>
Answer:<input id="answer" name="answer" type="text"><br>
<input onclick="calculate()" type="button" value="Addition">
</form>
</body>
</html>

Related

Add Two numbers from textbox using JavaScript

I was just trying to write a simple javascript program that will demonstrate to take user input from text field, and clicking the button will display the summation result of those number in a paragraph. But unfortunately the below code is not working. Clicking the button shows NAN in the Paragraph.
<input type="text" name="" id="num1"><br><br>
<input type="text" name="" id="num2"><br> <br>
<button id="add">Answer</button>
<br>
<p id="para"></p>
<script>
let num1=parseInt(document.getElementById("num1"));
let num2=parseInt(document.getElementById("num2"));
let add=document.getElementById("add");
add.addEventListener("click",function(){
document.getElementById("para").innerHTML=num1+num2;
});
</script>
You are getting the elementById, but not getting that IDs value.
Add .value on the end of your getElementById
function addTogether()
{
var val1 = document.getElementById('val1').value;
var val2 = document.getElementById('val2').value;
var sum = parseInt(val1) + parseInt(val2);
console.log(sum);
}
<input type="text" id="val1" />
<input type="text" id="val2" />
<input type="button" value="Add Them Together" onclick="addTogether();" />
You can simply do it like this
<input type="text" id="num1"><br><br>
<input type="text" id="num2"><br><br>
<button id="add">Answer</button><br>
<p id="para"></p>
<script>
let add=document.getElementById("add");
add.addEventListener("click",function(){
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var res = parseInt(num1) + parseInt(num2);
document.getElementById("para").innerHTML = res ;
});
</script>
here is the demo of working code
let add=document.getElementById("add");
add.addEventListener("click",function(){
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var res = parseInt(num1) + parseInt(num2);
document.getElementById("para").innerHTML = res ;
});
<input type="text" id="num1"><br><br>
<input type="text" id="num2"><br><br>
<button id="add">Answer</button>
<br>
<p id="para"></p>
you need to get the value of num1 and num2 and you need to get the value after you click -- so inside your function
<input type="text" name="" id="num1"><br><br>
<input type="text" name="" id="num2"><br> <br>
<button id="add">Answer</button>
<br>
<p id="para"></p>
<script>
let add=document.getElementById("add");
add.addEventListener("click",function(){
let num1=parseInt(document.getElementById("num1").value);
let num2=parseInt(document.getElementById("num2").value);
document.getElementById("para").innerHTML=num1+num2;
});
</script>

how can i get input text value and pass in button onclick method in javascript function pass by values

function addData (n1, n2) {
alert(fn+ln);
}
<body>
<input Type="text" name="n1">
<input Type="text" name="n2">
<button onClick="addData(n1.value,n2.value)">click</button>
</body>
its give me the following error:
ReferenceError: n1 is not defined.
You cannot get the value of the input by using n1.value You need to obtain the DOM element using document.getElementById and use its value to obtain the string value and parse it as Integer before you add them.
See this:
function addData (n1, n2) {
n1Val = parseInt(n1.value);
n2Val = parseInt(n2.value);
alert(n1Val+n2Val);
}
<body>
<input Type="text" id="n1">
<input Type="text" id="n2">
<button onClick="addData(document.getElementById('n1'), document.getElementById('n2'))">click</button>
</body>
If you want to merely concatenate the data and not add it, just remove the parseInt call and add the strings like in the following example:
function addData (n1, n2) {
n1Val = n1.value;
n2Val = n2.value;
alert(n1Val+n2Val);
}
<body>
<input Type="text" id="n1">
<input Type="text" id="n2">
<button onClick="addData(document.getElementById('n1'), document.getElementById('n2'))">click</button>
</body>
Hope it helps!!
Do like this way:
function addData (e) {
var rec = 0;
var t = document.getElementsByTagName('input');
for(var i=0;i<t.length;i++){
rec=rec+parseInt(t[i].value);
}
console.log(rec);
}
<script>
</script>
<body>
<input Type="text" name="n1">
<input Type="text" name="n2">
<button onClick="addData(this)">click</button>
</body>
<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");
var final = val1 + val2;
alert(final);
}
</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()" />
</body>
</html>

Superscript Calculation Javascript Variables

I'm exercising in calculations with variables using javascript and i can't figure out how to use superscripts in variables. With some help Javascript calculations holding variables i learned how to do calculations in general but my new question is how to use superscripts?
<form name="Calcultor" Method="Get" id='form1'>First Number:
<input type="text" name="first" size="35" id="first">+ Second Number:
<input type="text" name="second" size="35" id="second">
<br>Answer:
<input type="text" name="ans" size="35" id="ans" />
<input type="text" name="ans2" size="35" id="ans2" />
<button type="button" onclick="Calculate();">Calculate</button>
</form>
<script>
function Calculate() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
var ans = document.getElementById('ans').value;
var ans2 = document.getElementById('ans2').value;
document.getElementById('ans').value = parseInt(first) + parseInt(second);
document.getElementById('ans2').value = 1.112 - 0.00043499 * parseInt(document.getElementById('ans').value)/*insert ans into a parenthensis*/ + 0.00000055 * parseInt(document.getElementById('ans').value)/*insert ans into a parenthensis and ^2 outside the parenthesis*/ - 0.00028826;
}
</script>
Thanks in advance
There is a function in javascript Math.pow();
Math.pow(2,4) gives you 2^4 = 16.
Math.pow(2,4);
>16
Math.pow(2,4.1);
>17.148375400580687
<form name="Calcultor" Method="Get" id='form1'>First Number:
<input type="text" name="first" size="35" id="first">+ Second Number:
<input type="text" name="second" size="35" id="second">
<br>Answer:
<input type="text" name="ans" size="35" id="ans" />
<input type="text" name="ans2" size="35" id="ans2" />
<button type="button" onclick="Calculate();">Calculate</button>
</form>
<script>
function Calculate() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
var ans = document.getElementById('ans').value;
var ans2 = document.getElementById('ans2').value;
document.getElementById('ans').value = parseInt(first) + parseInt(second);
document.getElementById('ans2').value = 1.112 - 0.00043499 * parseInt(document.getElementById('ans').value) + 0.00000055 * Math.pow(parseInt(document.getElementById('ans').value), 2) - 0.00028826;
}
</script>
Updated Snippet according to answers works now!

adding multiplied numbers using javascript

function multiplyBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
num3= document.getElementById("result").value = num1 * num2;
document.getElementById("total").value = +num3 ;
}
1st Number : <input type="text" id="firstNumber" value="" /><br>
2nd Number: <input type="text" id="secondNumber" value="" onchange="multiplyBy()" /><br>
<p>The Result is : <br>
<input type="text" name="result" id = "result" value=""/>
</p>
<p>Total :<br>
<input type="text" name="total" id="total" value=""/>
</p>
function multiplyBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
num3= document.getElementById("result").value = num1 * num2;
}
1st Number : <input type="text" id="firstNumber" value="" /><br>
2nd Number: <input type="text" id="secondNumber" value=""
onchange="multiplyBy()" /><br>
<p>The Result is : <br>
<input type="text" name="result" id = "result" value=""/>
</p>
I am multiplying two numbers here.how to add those multiplied numbers in another text box.suppose 2&5 are multiplied later 4&6 multiplied how to add those numbers.
Try this. You need to parse the input value using parseFloat. This will convert the string to a number. The existing result value is added to the newly calculating value. |0 is used for the false value of input getting 0
Updated
prev, present and total result box were added
Append each additional input with new result.
var last=0;
function multiplyBy() {
var num1 = document.getElementById("firstNumber");
var num2 = document.getElementById("secondNumber");
var prev = document.getElementById("prev");
var present = document.getElementById("present");
var total = document.getElementById("result");
prev.value=last;
present.value=(parseFloat(num1.value) * parseFloat(num2.value))
last = last+(parseFloat(num1.value) * parseFloat(num2.value))
total.value=last;
num1.value = "";
num2.value = "";
}
1st Number : <input type="text" id="firstNumber" value="" /><br> 2nd Number: <input type="text" id="secondNumber" value="" onchange="multiplyBy()" /><br>
<p >
Prev result:<br>
<input type="text" name="result" id="prev" ><br>
Present:<br>
<input type="text" name="result" id="present" ><br>
The total Result is : <br>
<input type="text" name="result" id="result"><br>
</p>
You just need for get value of text box and add it with result
function multiplyBy()
{ var sum = 0;
var num=0;
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
num =parseInt(num1 * num2);
num3=parseInt(document.getElementById("result").value);
document.getElementById("result").value=(num + num3);
}
</script>
1st Number : <input type="text" id="firstNumber" value="" /><br>
2nd Number: <input type="text" id="secondNumber" value=""
onchange="multiplyBy()" /><br>
<p>The Result is : <br>
<input type="text" name="result" id = "result" value="0"/>
</p>
I have added the multiplyBy() to both the input fields and changed the type to number to restrict the user to enter number only.
Please check the code snippet below.
document.getElementById("firstNumber").addEventListener("change",multiplyBy);
document.getElementById("secondNumber").addEventListener("change",multiplyBy);
function multiplyBy()
{
actualResult = document.getElementById("actualResult").value ? document.getElementById("actualResult").value : 0; // Return zero if there is no value in actualResult input field
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
num3= document.getElementById("result").value = num1 * num2;
document.getElementById("actualResult").value = Number(actualResult) + num3;
}
1st Number : <input type="number" id="firstNumber" value=""/><br>
2nd Number: <input type="number" id="secondNumber" value=""/><br>
<p>The Current Result is : <br>
<input type="number" name="result" id = "result" value=""/>
</p>
<p>Previous Result + Current Result : <br>
<input type="number" name="actualResult" id = "actualResult" value=""/>
</p>
You need to add event handlers if you want to calculate on change of textbox input like following.
function multiplyBy()
{
var result = document.getElementById("result");
var num1 = document.getElementById("firstNumber").value;
var num2 = document.getElementById("secondNumber").value;
var num3= parseFloat(num1) * parseFloat(num2);// to convert entered values to float and || 0 to use 0 if no value is there
if(!isNaN(num3)){
document.getElementById("resultPrev").value = document.getElementById("result").value;
document.getElementById("resultCurrent").value = num3;
result.value = parseFloat(result.value || 0) + num3;
}
}
document.getElementById("firstNumber").addEventListener("change",multiplyBy);
document.getElementById("secondNumber").addEventListener("change",multiplyBy);
1st Number : <input type="text" id="firstNumber" value="" /><br>
2nd Number: <input type="text" id="secondNumber" /><br>
<p>The Previous Result is : <br>
<input type="text" name="resultPrev" id = "resultPrev" value="0"/>
</p>
<p>The Current Result is : <br>
<input type="text" name="resultCurrent" id = "resultCurrent" value=""/>
</p>
<p>The Final Result is : <br>
<input type="text" name="result" id = "result" value=""/>
</p>
Consider handling non number values.

how to update input type=" text" with javascript after an operation [duplicate]

This question already has answers here:
Set the value of an input field
(17 answers)
Closed 8 years ago.
I wish to update the text field with id=you after clicking the update button,in the script I have also tried current=document.getElementById("you");
current.innerText=num1; to no avail,thanks very much for your response.
<form name="ADD" >
<input type="text" name="new1" value="0/><br /><br />
<input type="text" name="current" id="you" value="" />
<input type="button" value="update"
onclick="add(this.form.new1.value,this.form.current.value);" />
</form>
<script type="text/javascript" >
var add = function (num1, num2) {
var current;
num1 = parseInt(num1);
num2 = parseInt(num2);
num2 += num1;
current= document.getElementById("you");
current.setAttribute("value", num1);
};
</script>
var current = document.getElementById("you");
current.value = num1;
This can be achieved with basic jQuery:
HTML
<form name="ADD" >
<input type="text" name="new1" value="0/><br /><br />
<input type="text" name="current" id="you" value="" />
<input type="button" value="update"/>
</form>
jQuery
$(document).ready(function(){
$("button").clicked(function(){
$("#you").val("You new value");
});
});
Or in pure jscript:
<input type=button value='Update' onclick="add("Your new value");">
<script>
function add(value){
var input = document.getElementById("you");
input.value = value;
}
</script>
try this. it works
<form name="ADD">
<input type="text" name="new1" value="0"/><br /><br />
<input type="text" name="current" id="you" value="" />
<input type="button" value="update"
onclick="add(this.form.new1.value,this.form.current.value);" />
</form>
<script>
function add(num1, num2) {
var current;
num1 = parseInt(num1);
num2 = parseInt(num2);
num2 += num1;
document.getElementById('you').value = num1;
};
</script>

Categories

Resources