I have assigned a task to add two textbox values.I want the result of addition to appear in the 3rd textbox,as soon as enter the values in the first two textboxes,without pressing any buttons.
For eg:In the first textbox i want to enter 450,when i press digit 4 of number '450',then it will be added to the 3rd textbox,any number i press in the first two textboxes,suddenly that changes will be reflected on the third textbox.How can i do this?
Here i write my code call sum() in onkeyup
onkeyup="sum()"
function sum() {
var txtFirstNumberValue = document.getElementById('txt1').value;
var txtSecondNumberValue = document.getElementById('txt2').value;
var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
if(!isNaN(result)){
document.getElementById('txt3').value = result;
}
}
This is not working in chrome
This question is related to
javascript
In below code i have done operation of sum and subtraction: because of using JavaScript if you want to call function, then you have to put your below code outside of document.ready(function{ });
and outside the script end tag.
I have taken one another script tag for this operation.And put below code between script starting tag // your code // script ending tag.
function operation()
{
var txtFirstNumberValue = parseInt(document.getElementById('basic').value);
var txtSecondNumberValue =parseInt(document.getElementById('hra').value);
var txtThirdNumberValue =parseInt(document.getElementById('transport').value);
var txtFourthNumberValue =parseInt(document.getElementById('pt').value);
var txtFiveNumberValue = parseInt(document.getElementById('pf').value);
if (txtFirstNumberValue == "")
txtFirstNumberValue = 0;
if (txtSecondNumberValue == "")
txtSecondNumberValue = 0;
if (txtThirdNumberValue == "")
txtThirdNumberValue = 0;
if (txtFourthNumberValue == "")
txtFourthNumberValue = 0;
if (txtFiveNumberValue == "")
txtFiveNumberValue = 0;
var result = ((txtFirstNumberValue + txtSecondNumberValue +
txtThirdNumberValue) - (txtFourthNumberValue + txtFiveNumberValue));
if (!isNaN(result)) {
document.getElementById('total').value = result;
}
}
And put onkeyup="operation();"
inside all 5 textboxes in your html form.
This code running in both Firefox and Chrome.
i didn't find who made elegant answer , that's why let me say :
Array.from(
document.querySelectorAll('#txt1,#txt2')
).map(e => parseInt(e.value) || 0) // to avoid NaN
.reduce((a, b) => a+b, 0)
window.sum= () => _x000D_
document.getElementById('result').innerHTML= _x000D_
Array.from(_x000D_
document.querySelectorAll('#txt1,#txt2')_x000D_
).map(e=>parseInt(e.value)||0)_x000D_
.reduce((a,b)=>a+b,0)
_x000D_
<input type="text" id="txt1" onkeyup="sum()"/>_x000D_
<input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;"/><span id="result"></span>
_x000D_
well I think the problem solved this below code works:
function sum() {
var result=0;
var txtFirstNumberValue = document.getElementById('txt1').value;
var txtSecondNumberValue = document.getElementById('txt2').value;
if (txtFirstNumberValue !="" && txtSecondNumberValue ==""){
result = parseInt(txtFirstNumberValue);
}else if(txtFirstNumberValue == "" && txtSecondNumberValue != ""){
result= parseInt(txtSecondNumberValue);
}else if (txtSecondNumberValue != "" && txtFirstNumberValue != ""){
result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
}
if (!isNaN(result)) {
document.getElementById('txt3').value = result;
}
}
Try this: Open given fiddle in CHROME
function sum() {
var txtFirstNumberValue = document.getElementById('txt1').value;
var txtSecondNumberValue = document.getElementById('txt2').value;
var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('txt3').value = result;
}
}
HTML
<input type="text" id="txt1" onkeyup="sum();" />
<input type="text" id="txt2" onkeyup="sum();" />
<input type="text" id="txt3" />
This is the correct code
function sum()
{
var txtFirstNumberValue = document.getElementById('total_fees').value;
var txtSecondNumberValue = document.getElementById('advance_payement').value;
var result = parseInt(txtFirstNumberValue) - parseInt(txtSecondNumberValue);
if(txtFirstNumberValue=="" ||txtSecondNumberValue=="")
{
document.getElementById('balance_payement').value = 0;
}
if (!isNaN(result))
{
document.getElementById('balance_payement').value = result;
}
}
Since eval("3+2")=5
,you can use it as following :
byId=(id)=>document.getElementById(id);
byId('txt3').value=eval(`${byId('txt1').value}+${byId('txt2').value}`)
By that, you don't need parseInt
Well, base on your code, you would put onkeyup=sum() in each text box txt1 and txt2
Source: Stackoverflow.com