Wie werden die Summen in einem Taschenrechner angezeigt?

Also habe ich einen Rechner für meine Arbeit gemacht, der sieht, wie viel wir potentielle Kunden retten können. Alles funktioniert gut, aber ich kann die Gesamtgebühr für alle Boxen nicht erhalten. Ich glaube nur nicht, dass ich den richtigen Prozess kenne, um die "monatlichen Einsparungen" am Ende zusammenzufassen. HierWie werden die Summen in einem Taschenrechner angezeigt?

ist ein JSFiddle: https://jsfiddle.net/snn5vhg2/

Hier ist die Seite:http://176.32.230.46/sarahmcdonald.com/files/index.html

Und hier ist der Code:

<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>

Quelle

2016-04-15 Sarah McDonald

wo möchten Sie insgesamt anzeigen? – uzaif

'var monTotal =' was kommt in dieser Variable? – uzaif

Wir sind vorsichtig und mögen es nicht, auf URLs zu klicken. Ich habe hier ein JSFiddle erstellt: https://jsfiddle.net/snn5vhg2/ – bitfiddler

Es scheint, dass Sie nur beenden, wenn Sie zu 90% fertig sind (hoffentlich nicht).

Aber beenden Sie die Werte aus den xxMonthlySpan und xxYearlySpan Tags zu greifen brauchte, wandeln sie in Schwimmern, fügen sie zusammen, und dann die innerHTML der span in der End-Tags ändern.

Sie hatten auch nicht <span id="yearlyTotalSpan"></span>, also fügte ich hinzu, nur um mit allem anderen übereinzustimmen, das Sie hatten.

Ich auch für das Jahr insgesamt auf zwei Dezimalstellen gerundet. Hier

ist eine Geige: https://jsfiddle.net/qkx8h3hy/

Kommentar, wenn Sie Fragen haben.

Quelle

2016-04-15 01:58:58 theblindprophet

Sieht aus, als ob ich den Parsfloat vermisst hätte, ich habe das noch nicht gelernt. Also als ich den Wert gemacht habe, bekam ich NaN. Und als ich das .innerHTML machte, habe ich gerade alle Summen aufgeführt, nicht hinzugefügt. Ist das Parse-float in diesem Fall eine Notwendigkeit oder gibt es eine Möglichkeit, dies mit .value zu tun? –

So wird 'innerHTML' als String zurückgegeben. 'parseFloat' verwandelt es einfach in eine Dezimalzahl. – theblindprophet

Das ist toll zu wissen! Soll ich für die zukünftige Referenz auch parseFloat in den Berechnungen mit den Eingaben verwenden? Anstatt den Wert zu erhalten? –

Wie werden die Summen in einem Taschenrechner angezeigt?

Antwort

Verwandte Themen