2017-10-21 12 views
0

Ich schreibe einen einfachen JS Prorate Rechner speziell auf meine Arbeit Bedürfnisse. Wenn ich calculateProrate() in der Konsole anrufe, gibt es die richtige Antwort zurück, aber wenn ich es innerhalb meiner getFormData() Funktion rufe, gibt es eine viel höhere und offensichtlich falsche Antwort zurück.JavaScript Prorate Rechner, Funktion innerhalb Funktion aufgerufen gibt nicht den gleichen Wert

function calculateProrate(a,b,c,d) { 
 
    // a = added monthly cost of service 
 
    // b = removed monthly cost of service 
 
    // c = day of month service was changed 
 
    // d = start of customer's billing cycle (same each month) 
 
    return ((a + (b * -1))/30) * ((d + 30) - c); 
 
} 
 

 
function getFormData() { 
 
    var addedCosts = document.getElementById('added-costs').value; 
 
    var removedCosts = document.getElementById('removed-costs').value; 
 
    var startDay = document.getElementById('start-day').value; 
 
    var billingStart = document.getElementById('billing-start').value; 
 
    var answer = document.getElementById('answer'); 
 
    answer.innerHTML = calculateProrate(addedCosts, removedCosts, startDay, billingStart); 
 

 
    // for testing purposes 
 
    console.log("Added costs: " + addedCosts); 
 
    console.log("Removed costs: " + removedCosts); 
 
    console.log("Start day: " + startDay); 
 
    console.log("Billing start: " + billingStart); 
 
    console.log("Prorate amount: " + calculateProrate(addedCosts, removedCosts, startDay, billingStart)); 
 
} 
 

 
document.getElementById('submit').addEventListener('click', getFormData);
<h1>Prorate Calculator</h1> 
 
<p>Added monthly costs: <input id="added-costs" type="text"></p> 
 
<p>Removed monthly costs: <input id="removed-costs" type="text"></p> 
 
<p>Day change starts: <input id="start-day" type="text"></p> 
 
<p>Billing cycle start day: <input id="billing-start" type="text"></p> 
 
<button id="submit">Submit</button> 
 
<p>Answer: <span id="answer"></span></p>

Zum Beispiel, wenn ich calculateProrate(20,0,21,3) in der Konsole ausführen, gibt es 8 was richtig ist. Aber auf der Seite und sogar in einer console.log von innerhalb getFormData(), gibt es 2060 zurück. Wie ist es zu dieser Antwort gekommen?

Edit: Ich verwende dies nicht in der Produktion. Es ist nur für meinen persönlichen Gebrauch, ungefähre Pro-Rate-Beträge zu geben, bevor Änderungen in unserem System vorgenommen werden, nach denen ich tatsächliche Beträge anzeigen kann.

Antwort

1

Sie müssen sicherstellen, dass Ihre Eingaben Ganzzahlen sind, Sie tun Mathe auf Strings.

> calculateProrate(20,0,21,3) 
8 
> calculateProrate("20","0","21","3") 
2060 

Versuchen Sie, die Number Funktion, wie in: auf Eingabezeichenfolge nicht auf einer Reihe

a = Number(a); 
0

Sie Mathe tun. Sie können Funktion ‚ParseInt‘ verwenden Eingabezeichenfolge zu konvertieren int dann funktioniert alles

function calculateProrate(a,b,c,d) { 
 
    // a = added monthly cost of service 
 
    // b = removed monthly cost of service 
 
    // c = day of month service was changed 
 
    // d = start of customer's billing cycle (same each month) 
 
    return ((a + (b * -1))/30) * ((d + 30) - c); 
 
} 
 

 
function getFormData() { 
 
    var addedCosts = parseInt(document.getElementById('added-costs').value); 
 
    var removedCosts = parseInt(document.getElementById('removed-costs').value); 
 
    var startDay = parseInt(document.getElementById('start-day').value); 
 
    var billingStart = parseInt(document.getElementById('billing-start').value); 
 
    var answer = document.getElementById('answer'); 
 
    answer.innerHTML = calculateProrate(addedCosts, removedCosts, startDay, billingStart); 
 

 
    // for testing purposes 
 
    console.log("Added costs: " + addedCosts); 
 
    console.log("Removed costs: " + removedCosts); 
 
    console.log("Start day: " + startDay); 
 
    console.log("Billing start: " + billingStart); 
 
    console.log("Prorate amount: " + calculateProrate(addedCosts, removedCosts, startDay, billingStart)); 
 
} 
 

 
document.getElementById('submit').addEventListener('click', getFormData);
<h1>Prorate Calculator</h1> 
 
<p>Added monthly costs: <input id="added-costs" type="text"></p> 
 
<p>Removed monthly costs: <input id="removed-costs" type="text"></p> 
 
<p>Day change starts: <input id="start-day" type="text"></p> 
 
<p>Billing cycle start day: <input id="billing-start" type="text"></p> 
 
<button id="submit">Submit</button> 
 
<p>Answer: <span id="answer"></span></p>

0

Textfelder sind Strings nicht Number Typ. Verwenden Sie parseInt für jeden Eingang. MDN Parseint

JSFiddle:

function calculateProrate(a,b,c,d) { 
 
    // a = added monthly cost of service 
 
    // b = removed monthly cost of service 
 
    // c = day of month service was changed 
 
    // d = start of customer's billing cycle (same each month) 
 
    return ((parseInt(a,0) + (parseInt(b, 0) * -1))/30) * ((parseInt(d) + 30) - parseInt(c)); 
 
} 
 

 
function getFormData() { 
 
    var addedCosts = document.getElementById('added-costs').value; 
 
    var removedCosts = document.getElementById('removed-costs').value; 
 
    var startDay = document.getElementById('start-day').value; 
 
    var billingStart = document.getElementById('billing-start').value; 
 
    var answer = document.getElementById('answer'); 
 
    answer.innerHTML = calculateProrate(addedCosts, removedCosts, startDay, billingStart); 
 

 
    // for testing purposes 
 
    console.log("Added costs: " + addedCosts); 
 
    console.log("Removed costs: " + removedCosts); 
 
    console.log("Start day: " + startDay); 
 
    console.log("Billing start: " + billingStart); 
 
    console.log("Prorate amount: " + calculateProrate(addedCosts, removedCosts, startDay, billingStart)); 
 
} 
 

 
document.getElementById('submit').addEventListener('click', getFormData);
<h1>Prorate Calculator</h1> 
 
<p>Added monthly costs: <input id="added-costs" type="text"></p> 
 
<p>Removed monthly costs: <input id="removed-costs" type="text"></p> 
 
<p>Day change starts: <input id="start-day" type="text"></p> 
 
<p>Billing cycle start day: <input id="billing-start" type="text"></p> 
 
<button id="submit">Submit</button> 
 
<p>Answer: <span id="answer"></span></p>

0

Sie müssen nur zwei weitere Pluspunkte:

((+a + (b * -1))/30) * ((+d + 30) - c); 
Verwandte Themen