合計を電卓に表示するにはどうすればいいですか？

私は潜在的なクライアントをどれくらい節約できるか見ている私の仕事の電卓を作った。すべてうまくいきますが、すべてのボックスが表示されるための合計料金がかかりません。私はちょうど私が最終的に合計するためにすべての "月額節約"を得る正しいプロセスを知っているとは思わない。ここで合計を電卓に表示するにはどうすればいいですか？

はJSFiddleです：ここではhttps://jsfiddle.net/snn5vhg2/

ページです：

<html> 
<head> 
<title>First Data Calculator</title> 

<meta charset="utf-8" /> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 

<style type="text/css"> 

body{ 
background-color:#e5e5e5; 
} 

#container{ 
font-family:Tahoma, Geneva, sans-serif; 
} 

#main{ 
margin-bottom:50px; 
font-size:3em; 
text-decoration:underline; 
} 

#VISABOX{ 
display:inline-block; 
width:238px; 
background-color:#fce4d1; 
padding:15px; 
border-radius:6px; 
height:238px; 
border:#c9c9c9 solid 1px; 
} 

.boxes{ 
display:inline-block; 
margin-left:20px; 
vertical-align:top; 
width:238px; 
background-color:#fce4d1; 
padding:15px; 
height:238px; 
border-radius:6px; 
border:#c9c9c9 solid 1px; 
} 


.titles{ 
margin:0 0 0 8px; 
} 


.inputs{ 
margin:7px; 
height:25px; 
width:200px; 
} 

.words{ 
margin:7px 0 0 8px ; 
} 

.calculators{ 
margin:7px; 
height:25px; 
border-radius:5px; 
background-color:#F3F3F3; 
} 

#totals{ 
margin:30px 0 0 5px; 
font-size:1.3em; 
} 

#finishButton{ 
font-size:1.3em; 
border-radius:7px; 
background-color:#F3F3F3; 
} 



</style> 


</head> 

<body> 

<div id="container"> 
<h1 id="main">Fee Calculator</h1> 

<div id="VISABOX" > 
<h4 id="VISA" class="titles">Visa</h4> 
<input id="vVol" class="inputs" type="text" placeholder="Visa Volume..."/><br> 
<input id="vFees" class="inputs" type="text" placeholder="Visa Fees..."/><br> 

<button id="vCalc" class="calculators"> Calculate </button> 
<p id="vEMDR" class="words">EMDR=<span id="vEMDRSPAN"></span></p> 
<p id="vMonthly" class="words">Monthly Savings=<span id="vMonthlySpan"></span></p> 
<p id="vYearly" class="words">Yearly Savings=<span id="vYearlySpan"></span></p> 
<p id="vFive" class="words">Five Year Savings=<span id="vFiveSpan"></span></p> 
</div> 




<div id="MCBOX" class="boxes"> 
<h4 id="MC" class="titles">MasterCard</h4> 
<input id="mcVol" class="inputs" type="text" placeholder="MC Volume..."/><br> 
<input id="mcFees" class="inputs" type="text" placeholder="MC Fees..."/><br> 

<button id="mcCalc" class="calculators"> Calculate </button> 
<p id="mcEMDR" class="words">EMDR=<span id="mcEMDRSPAN"></span></p> 
<p id="mcMonthly" class="words">Monthly Savings=<span id="mcMonthlySpan"></span></p> 
<p id="mcYearly" class="words">Yearly Savings=<span id="mcYearlySpan"></span></p> 
<p id="mcFive" class="words">Five Year Savings=<span id="mcFiveSpan"></span></p> 
</div> 




<div id="IDPBOX" class="boxes"> 
<h4 id="IDP" class="titles">Interac</h4> 
<input id="idpTrans" type="text" class="inputs" placeholder="# of Trans..."/><br> 
<input id="idpFees" type="text" class="inputs" placeholder="IDP Fees..."/><br> 

<button id="idpCalc" class="calculators"> Calculate </button> 
<p id="idpPerTran" class="words">Per Tran=<span id="idpPerTranSpan"></span></p> 
<p id="idpMonthly" class="words">Monthly Savings=<span id="idpMonthlySpan"></span></p> 
<p id="idpYearly" class="words">Yearly Savings=<span id="idpYearlySpan"></span></p> 
<p id="idpFive" class="words">Five Year Savings=<span id="idpFiveSpan"></span></p> 
</div> 

<div id="OCBOX" class="boxes"> 
<h4 id="OC" class="titles"> Other Charges </h4> 
<input id="otherCharges" type="text" class="inputs" placeholder="Total Other Charges..." /><br> 
<input id="ourCharges" type="text" class="inputs" placeholder="Our Other Charges..." /><br> 
<button id="ocCalc" class="calculators"> Calculate </button> 

<p id="ocMonthly" class="words"> Monthly Savings=<span id="ocMonthlySpan"></span></p> 
<p id="ocYearly" class="words">Yearly Savings=<span id="ocYearlySpan"></span></p> 
<p id="ocFive" class="words">Five Year Savings=<span id="ocFiveSpan"></span></p> 
</div> 

<div id="totals"> 
<button id="finishButton"> Finish </button> 
<p id="monthlyTotal"> Monthly Total Savings=<span id="monthlyTotalSpan"></span></p> 
<p id="yearlyTotal"> Total Yearly Savings=</p> 
</div>

<script type="text/javascript"> 

    document.getElementById("vCalc").onclick=function(){ 

     var visaVol=document.getElementById("vVol").value; 
     var visaFees=document.getElementById("vFees").value; 
     var visaEMDR; 
     visaEMDR=(visaFees/visaVol*100).toFixed(2); 

     var visaMonthly=(visaFees-(visaVol*.0171)).toFixed(2); 
     var visaYearly=(visaMonthly*12).toFixed(2); 
     var visaFive=(visaYearly*5).toFixed(2); 

     document.getElementById("vMonthlySpan").innerHTML=" "+visaMonthly+"$"; 
     document.getElementById("vYearlySpan").innerHTML=" "+visaYearly+"$"; 
     document.getElementById("vFiveSpan").innerHTML=" "+visaFive+"$"; 
     document.getElementById("vEMDRSPAN").innerHTML=" "+visaEMDR+"%"; 

    } 

    document.getElementById("mcCalc").onclick=function(){ 

     var mcVol=document.getElementById("mcVol").value; 
     var mcFees=document.getElementById("mcFees").value; 
     var mcEMDR=(mcFees/mcVol*100).toFixed(2); 

     var mcMonthly=(mcFees-(mcVol*.0178)).toFixed(2); 
     var mcYearly=(mcMonthly*12).toFixed(2); 
     var mcFive=(mcYearly*5).toFixed(2); 

     document.getElementById("mcMonthlySpan").innerHTML=" "+mcMonthly+"$"; 
     document.getElementById("mcYearlySpan").innerHTML=" "+mcYearly+"$"; 
     document.getElementById("mcFiveSpan").innerHTML=" "+mcFive+"$"; 
     document.getElementById("mcEMDRSPAN").innerHTML=" "+mcEMDR+"%"; 

    } 


    document.getElementById("idpCalc").onclick=function(){ 

     var debitTrans=document.getElementById("idpTrans").value; 
     var debitFees=document.getElementById("idpFees").value; 
     var perTran=(debitFees/debitTrans).toFixed(2); 

     var debitMonthly=(debitFees-(debitTrans*.04)).toFixed(2); 
     var debitYearly=(debitMonthly*12).toFixed(2); 
     var debitFive=(debitYearly*5).toFixed(2); 

     document.getElementById("idpPerTranSpan").innerHTML=" "+perTran+"$"; 
     document.getElementById("idpMonthlySpan").innerHTML=" "+debitMonthly+"$"; 
     document.getElementById("idpYearlySpan").innerHTML=" "+debitYearly+"$"; 
     document.getElementById("idpFiveSpan").innerHTML=" "+debitFive+"$"; 
    } 


    document.getElementById("ocCalc").onclick=function(){ 
     var otherFees=document.getElementById("otherCharges").value; 
     var ourFees=document.getElementById("ourCharges").value; 

     var ocMonthlySav=(otherFees-ourFees).toFixed(2); 
     var ocYearlySav=(ocMonthlySav*12).toFixed(2); 
     var ocFiveSav=(ocYearlySav*5).toFixed(2); 

     document.getElementById("ocMonthlySpan").innerHTML=" "+ocMonthlySav+"$"; 
     document.getElementById("ocYearlySpan").innerHTML=" "+ocYearlySav+"$"; 
     document.getElementById("ocFiveSpan").innerHTML=" "+ocFiveSav+"$"; 
    } 

document.getElementById("finishButton").onclick=function(){ 
    var monTotal= 

    document.getElementById("monthlyTotalSpan").innerHTML=" "+monTotal+"$"; 
} 

</script>

： http://176.32.230.46/sarahmcdonald.com/files/index.html

そしてここでは、コードです

出典

2016-04-15 Sarah McDonald

あなたは合計を表示したいですか？ – uzaif

'var monTotal ='この変数には何が入っていますか？ – uzaif

URLをクリックするのは慎重で、好きではありません。ここではJSFiddleを作成しました：https://jsfiddle.net/snn5vhg2/ – bitfiddler

90％が終了したばかりのときに終了したようです（うまくいけば）。

しかし、あなたは、xxMonthlySpanとxxYearlySpanタグから値をつかむフロートに変換し、それらを一緒に追加してから、最後にspanタグのinnerHTMLを変更するために必要な仕上げにします。

あなたは<span id="yearlyTotalSpan"></span>も持っていなかったので、あなたが持っていたものと一貫性を持たせるために追加しました。

私はまた、合計で2桁の小数点以下を四捨五入しました。ご質問があればhttps://jsfiddle.net/qkx8h3hy/

コメント：ここ

はフィドルです。

出典

2016-04-15 01:58:58 theblindprophet

私はparsefloatが見つからないように見えますが、私はまだそれを学んでいません。私が.valueをしたとき、私はNaNを得ました。そして、私が.innerHTMLをしたとき、私はちょうどすべての合計をリストアップしました、追加されませんでした。この場合、解析浮動小数点が必要か、それとも.valueでそれを行う方法がありますか？ –

したがって、 'innerHTML'は文字列として返されます。 'parseFloat'は10進数に変換します。 – theblindprophet

それは知って素晴らしいです！ですから、将来の参照のために、入力との計算でparseFloatを使用する必要がありますか？ .valueを取得する代わりに？ –

合計を電卓に表示するにはどうすればいいですか？

答えて

関連する問題