我有一些文本框。我的Html代码是:
<input type="text" id="amt_5" onkeyup="calculateTotal(5);" style="width:50px" name="data[Fee][fee_to]">
<input type="text" id="dis_5" onkeyup="calculateTotal(5);" style="width:50px" name="data[Fee][fee_to]">
<input type="text" id="total_5" style="width:50px" name="data[Fee][fee_to]">
<input type="text" id="amt_6" onkeyup="calculateTotal(6);" style="width:50px" name="data[Fee][fee_to]">
<input type="text" id="dis_6" onkeyup="calculateTotal(6);" style="width:50px" name="data[Fee][fee_to]">
<input type="text" id="total_6" style="width:50px" name="data[Fee][fee_to]">
Total Fees Amount
<span id="Fees_amt" style="margin-left:20px;"></span>
我的js代码是:
<script>
function calculateTotal(pid){
//alert($id_particular);
var amt=document.getElementById('amt_'+pid).value;
var dis=document.getElementById('dis_'+pid).value;
if(amt != "" && dis != ""){
var total = (amt-((dis*amt)/100));
}
else if(amt != "" && dis == ""){
var total = amt;
}
else{
var total = "";
}
document.getElementById('total_'+pid).value=total;
}
</script>
以上代码基本上如下:
从textbox(amt_5,amt_6)
获取金额值,从textbox(dis_5,dis_6)
获取折扣值,通过js计算textbox(total_5,total_6)
的总数和填充数
现在我想做的是:
无论总数是total_6
还是total_5
,都会添加并填充我的span元素Fees_amt
这应该通过js来完成,增强我的js代码而不刷新页面。
请帮忙。
答案 0 :(得分:0)
在现有的JavaScript代码中,您可以添加以下内容:
document.getElementById("Fees_amt").appendChild(document.createTextNode('' + total));
另一方面,从某个输入字段中有人输入字符的意义上讲,您当前的代码并不是很棒,因此运行整个计算功能。虽然代码有效,但我建议添加一个按钮,一旦将值输入到输入字段中,用户就可以单击该按钮。虽然需要更多用户输入,但我认为这是一种更清晰的组织代码的方式。
根据进一步说明进行修改
如果你想要total_6
和total_5
的总和最简单的方法(同时保持你当前的JavaScript结构将维护两个全局JavaScript变量中的值。这将看起来像这样:
<script>
var total5 = 0,
total6 = 0;
function calculateTotal(pid){
var amt=document.getElementById('amt_'+pid).value;
var dis=document.getElementById('dis_'+pid).value;
if(amt != "" && dis != ""){
var total = (amt-((dis*amt)/100));
}
else if(amt != "" && dis == ""){
var total = amt;
}
else{
var total = "";
}
document.getElementById('total_'+pid).value=total;
if(pid==5){
total5 = total;
} else{
total6 = total
}
document.getElementById("Fees_amt").appendChild(document.createTextNode(total6 + total5));
}
虽然这应该有效但我强烈建议您重新考虑处理此问题的方式。