[英]Add two textbox values and display the sum in a third textbox automatically
我已经分配了一个任务来添加两个文本框值。我希望添加的结果出现在第三个文本框中,只要在前两个文本框中输入值,而不按任何按钮。
例如:在第一个文本框中我想输入450,当我按下数字'450'的数字4时,它将被添加到第3个文本框,任何数字我按在前两个文本框中,突然显示更改将被反映在第三个文本框上。我怎么能这样做?
在这里,我在onkeyup中编写代码调用sum()
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;
}
}
这不适用于chrome
尝试这个
function sum() {
var txtFirstNumberValue = document.getElementById('txt1').value;
var txtSecondNumberValue = document.getElementById('txt2').value;
if (txtFirstNumberValue == "")
txtFirstNumberValue = 0;
if (txtSecondNumberValue == "")
txtSecondNumberValue = 0;
var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('txt3').value = result;
}
}
试试这个:在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" />
我没有找到谁做出优雅的答案,这就是为什么让我说:
Array.from(
document.querySelectorAll('#txt1,#txt2')
).map(e => parseInt(e.value) || 0) // to avoid NaN
.reduce((a, b) => a+b, 0)
window.sum= () => document.getElementById('result').innerHTML= Array.from( document.querySelectorAll('#txt1,#txt2') ).map(e=>parseInt(e.value)||0) .reduce((a,b)=>a+b,0)
<input type="text" id="txt1" onkeyup="sum()"/> <input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;"/><span id="result"></span>
那么,根据你的代码,你会在每个文本框txt1和txt2中放置onkeyup = sum()
以及我认为问题解决了以下代码的工作原理:
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;
}
}
这是正确的代码
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;
}
}
由于eval("3+2")=5
,您可以使用如下:
byId=(id)=>document.getElementById(id);
byId('txt3').value=eval(`${byId('txt1').value}+${byId('txt2').value}`)
这样,你不需要parseInt
在下面的代码中我已经完成了sum和subtraction的操作:因为如果你想调用函数使用JavaScript ,那么你必须将你的下面的代码放在document.ready(function{ });
并在脚本结束标记之外。
我为此操作添加了另一个脚本标记。并在脚本开始标记//代码//脚本结束标记之间放置以下代码。
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;
}
}
并把onkeyup="operation();"
在html表单中的所有5个文本框中。 此代码在Firefox和Chrome中运行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.