Question

我正在编写一个简单的JS prorate计算器，专门针对我的工作需求。当我在控制台中调用calculateProrate()时，它会返回正确的答案，但是当我从getFormData()函数中调用它时，它会返回一个更高且明显错误的答案。

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>

例如，当我在控制台中运行calculateProrate(20,0,21,3)时，它会返回8，这是正确的。但是在页面上，甚至在console.log内的getFormData()中，它都会返回2060。它是如何达到这个答案的？

编辑：我没有在制作中使用它。仅供我个人使用，在我们的系统进行更改之前提供近似的比率，之后我可以查看实际金额。

Answer 1

你需要确保你的输入是整数，你正在对字符串进行数学运算。

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

尝试使用Number功能，如：

a = Number(a);

Answer 2

您正在对输入字符串进行数学运算而不是数字。您可以使用函数'parseInt'将输入字符串转换为int，然后一切都可以正常工作

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>

Answer 3

文字字段为Strings而不是Number类型。每个输入都使用parseInt。 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>

Answer 4

你只需要两个额外的优点：

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

JavaScript prorate计算器，函数内调用的函数不返回相同的值

4 个答案: