Question

我想用Javascript创建Stripe.com费用计算器。条纹费：2.9％+ 30¢

我做到了：我们想要的值是（结果），价格为（num1）， 30美分是（num2），％2.9是（num3），

请检查下面的代码有什么问题？请帮忙。

function multiplyBy() {
    num1 = document.getElementById("firstNumber").value;
    num2 = 0.3;
    num3 = 0.971;

    document.getElementById("result").innerHTML = num1 + num2 / num3
}

<form>
  Value : <input type="text" id="firstNumber" /><br>
  <input type="button" onClick="multiplyBy()" Value="GO" />
</form>
<p>The Result is : <br>
<span id = "result"></span>
</p>

Answer 1

此处num1是字符串，不能用数字值加或除，首先应通过此代码num1将parseFloat(num1)的类型更改为数字。

尝试这种方式：

document.getElementById("result").innerHTML = parseFloat(num1) + num2 / num3

Answer 2

为使您自己和阅读代码的人更加清楚，您应该考虑对幻数使用变量。第一个问题是费用应使用input * 2.9% + $0.30计算。这是因为Stripe不会按固定费用部分收取一定费用。另一个问题是没有将输入字符串解析为数字。使用parseFloat解决此问题。我还要检查该值是否为NaN，以防止某些无效输入。

const priceInput = document.getElementById('price');
const output = document.getElementById('output');
const stripeDynamic = 0.029; // stripe takes 2.9% of total txn
const stripeStatic = 0.3; // plus stripe takes 30 cents

priceInput.addEventListener('keyup', (event) => {
  const {
    value
  } = event.target;
  const fee = parseFloat(value) * stripeDynamic + stripeStatic;
  const roundedFee = (Math.round(fee * Math.pow(10, 2)) / Math.pow(10, 2)).toFixed(2);
  const roundedInput = (Math.round(value * Math.pow(10, 2)) / Math.pow(10, 2)).toFixed(2);
  
  if (!isNaN(roundedFee) && !isNaN(roundedInput))
    output.innerHTML = `Steve bought a dress on your site that was sold for $${roundedInput}. After Stripe takes their cut of $${roundedFee} you're left with $${roundedInput - roundedFee} to go to web design!`
})

<input id="price" />
<p id="output" />

Answer 3

您可以尝试此解决方案，但是该解决方案允许输入零或为空，因此您应该验证输入值。

function multiplyBy() {
    num1 = document.getElementById("firstNumber").value;
    num2 = 0.3;
    num3 = 0.029;

    document.getElementById("result").innerText = Math.round((num1 * num3 + num2) * 100) / 100;
}

<form>
  Value : <input type="text" id="firstNumber" /><br>
  <input type="button" onClick="multiplyBy()" Value="GO" />
</form>
<p>The Result is : <br>
<span id = "result"></span>
</p>

JavaScript费用计算

3 个答案: