使用 onchange 调用多个函数答案

【问题标题】：Calling multiple functions with onchange使用 onchange 调用多个函数
【发布时间】：2013-04-22 19:50:33
【问题描述】：

所有这一切都超出了我的经验，但我已经到处寻找，并且今天到目前为止研究了这些东西 6 个小时，结果只是碰到了砖墙。

我有一个表格，用户在其中输入两个变量，然后从这两个变量中吐出 12 个不同的数字。这些数字作为纯文本字符串吐出到只读文本字段中的问题，我需要将它们显示为（美国）货币。表格中的所有输入字段都使用 onchange 来运行第一个进行计算的函数，但是我在网上找到的第二个和第三个函数我无法运行。

HTML：

 <form name="form" >

<table width="550" border="0">
<tr>
<td width="265" height="30"><div align="right">Number of Business Customers</div></td>
</tr>
<TR>
<td width="265" height="30"><div align="right">Number of Business Clients:</div></td>
<td width="142" div align="center"><input style="font-size:12px;text-align:center;" name="sum1" onChange="updatesum();CurrencyFormatted();CommaFormatted90;" /></td>
<td width="129" div align="center">&nbsp;</td>
</tr>
<TR>
<td height="30"><div align="right">Average Number of Employees:</td>
<TD div align="center"><input style="font-size:12px;text-align:center;" name="sum2" onChange="updatesum();CurrencyFormatted();CommaFormatted();" /></TD>
<TD div align="center">&nbsp;</TD>
<TR>
<td height="30"><div align="right">Anticipated Employee Tax Reduction:</div></td>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none;" name="sum16"  readonly "></TD>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum26" readonly><BR /></TD>
</TR>
<TR>
<td height="30"><div align="right">Potential Payroll Tax Reduction (annually):</div></td>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum17" readonly ></TD>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum27" readonly ></TD>
</TR>
<TR>
<td height="30"><div align="right">Potential Payroll Tax Reduction (monthly):</td>
<TD div align="center"><input type="text" style="font-size:12px;text-align:center;border:none" name="sum18" readonly ></td>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum28" readonly ></td>
</TR>
<TR>
<td height="30"><div align="right">Pearl Logic Billing (50% of savings, for 12 months):</td>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum19" readonly ></td>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum29" readonly ></td>
</TR>
<TR>
<td height="30"><div align="right">Sales Agent Monthly Comp (8%):</td>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum14" readonly ></td>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum24" readonly ></td>
</TR>
<TR>
<td height="30"><div align="right">Sales Agent Total Comp (8%):</td>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum15" readonly ></td>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum25" readonly ></td>
</TR>
</table>
</form>

Javascript：

function updatesum() {




document.form.sum14.value = ((((((document.form.sum1.value -0)*(document.form.sum2.value -0)*300))/12)/2)*.08);
document.form.sum24.value = ((((((document.form.sum1.value -0)*(document.form.sum2.value -0)*400))/12)/2)*.08);
document.form.sum15.value = (((((((document.form.sum1.value -0)*(document.form.sum2.value -0)*300))/12)/2)*.08)*12);
document.form.sum25.value = (((((((document.form.sum1.value -0)*(document.form.sum2.value -0)*400))/12)/2)*.08)*12);
document.form.sum16.value = 300;
document.form.sum26.value = 400;
document.form.sum17.value = ((document.form.sum1.value -0)*(document.form.sum2.value -0)*300);
document.form.sum27.value = ((document.form.sum1.value -0)*(document.form.sum2.value -0)*400);
document.form.sum18.value = (((document.form.sum1.value -0)*(document.form.sum2.value -0)*300)/12);
document.form.sum28.value = (((document.form.sum1.value -0)*(document.form.sum2.value -0)*400)/12);
document.form.sum19.value = ((((document.form.sum1.value -0)*(document.form.sum2.value -0)*300)/12)/2);
document.form.sum29.value = ((((document.form.sum1.value -0)*(document.form.sum2.value -0)*400)/12)/2);
}


//--></script>

<script type="text/javascript"><!--
function CurrencyFormatted()
{
    var i = parseFloat(amount);
    if(isNaN(i)) { i = 0.00; }
    var minus = '';
    if(i < 0) { minus = '-'; }
    i = Math.abs(i);
    i = parseInt((i + .005) * 100);
    i = i / 100;
    s = new String(i);
    if(s.indexOf('.') < 0) { s += '.00'; }
    if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
    s = minus + s;
    return s;
}
//--></script>
<script type="text/javascript"><!--
function CommaFormatted()
{
    var delimiter = ","; // replace comma if desired
    var a = amount.split('.',2)
    var d = a[1];
    var i = parseInt(a[0]);
    if(isNaN(i)) { return ''; }
    var minus = '';
    if(i < 0) { minus = '-'; }
    i = Math.abs(i);
    var n = new String(i);
    var a = [];
    while(n.length > 3)
    {
        var nn = n.substr(n.length-3);
        a.unshift(nn);
        n = n.substr(0,n.length-3);
    }
    if(n.length > 0) { a.unshift(n); }
    n = a.join(delimiter);
    if(d.length < 1) { amount = n; }
    else { amount = n + '.' + d; }
    amount = minus + amount;
    return amount;
}

//--></script>

【问题讨论】：

java 不是 javascript。 amount 在你的函数中来自哪里？
如果您打开浏览器 JavaScript 控制台（大多数浏览器都有），您会看到任何错误吗？
我很抱歉。如果您指的是函数“CommaFormatted()”和“CurrencyFormatted()”中提到的“金额”，我不知道这些金额的来源。我只创建了第一个函数“updatesum()”和 HTML 部分。我只抓住了最后两个函数，试图从“updatesum()”中获取结果，以货币而不是字符串的形式返回 HTML。
所以我可以给你一些随机代码，你甚至不用试图理解它就可以运行它，亲爱的。我有这个惊人的脚本，你只需要尝试一下......
@bmorris591 ，我很想了解你给我的代码。事实上，今天早上我什至不知道如何在 HTML 中调用函数，而现在我确实知道如何做到这一点，因为我找到了一些脚本并将其分解，直到我了解它是如何工作的。我正在就我有截止日期的事情寻求帮助，因为我的老板不想雇人做网站工作，因为我对这些东西“了解一点”。在接下来的几个小时内，我不太可能从头开始学习这一点，所以我想寻求帮助，并从中学习。我正在使用 CodeAcademy 来尝试学习这些东西。

标签： javascript html function input onchange

【解决方案1】：

您的函数有一个未定义的amount 变量。大概他们只是因为错误而崩溃。

首先，您需要从 onChange 侦听器中删除这些函数调用。

其次，更改函数以获取未格式化的值并返回格式化的值

function CurrencyFormatted(amount) { //<-- notice the method parameter
    var i = parseFloat(amount);
    if(isNaN(i)) { i = 0.00; }
    var minus = '';
    if(i < 0) { minus = '-'; }
    i = Math.abs(i);
    i = parseInt((i + .005) * 100);
    i = i / 100;
    s = new String(i);
    if(s.indexOf('.') < 0) { s += '.00'; }
    if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
    s = minus + s;
    return s;
}

现在更改updatesum 中的每个设置调用，以首先格式化值

var sum14 = ((((((document.form.sum1.value -0)*(document.form.sum2.value -0)*300))/12)/2)*.08);
var formattedSum14 = CommaFormatted(CurrencyFormatted(sum14));
document.form.sum14.value = sum14;

【讨论】：

好的，我想我明白你所说的未定义变量的意思。此外，我将更新集合调用，这是有道理的。但是如何从 onChange 监听器中移除函数呢？
将 onChange="updatesum();CurrencyFormatted();CommaFormatted();" 更改为 onChange="updatesum()"。您无需从 onChange 调用这些函数 - 您可以在 updatesum 中将它们用作实用函数。