javascript - 为什么两个数字相乘时会出现 NaN 错误？

Question

我的 getPercentage 函数工作得很好，但我的 getPayment 函数却不能，尽管它的写法完全一样。当我点击“获取付款”按钮时，它在 HTML 上返回“NaN”。

var taxes = {
  getPercentage: function(total, payment) {
   var percentage = (payment / total) * 100;
   return percentage;
   },
  getPayment: function(total, rate) {
    var payment = (total*rate);
    return payment;
    }
  };

var handlers = {
  getPercentage: function() {
    var totalInput = document.getElementById('totalInput');
    var paymentInput = document.getElementById('paymentInput');
    var answer = taxes.getPercentage(totalInput.value, paymentInput.value);
    getPercentageAnswer.innerHTML = answer;
  },
  getPayment: function() {
    var totalInputTwo = document.getElementById('totalInputTwo');
    var rateInput = document.getElementById("rateInput");
    var answer = taxes.getPayment(totalInputTwo.value, rateInput.value);
    getPaymentAnswer.innerHTML = answer;
  }
};

<div id="getPayment">
  <div id="totalTwo">
        Total owed: 
    <input id="totalInputTwo" type="text">
  </div>
<div id="rateInput">
      Your tax rate (as a decimal):
  <input id="rateInput" type="text">
  </div>
  <button onclick="handlers.getPayment()">Get payment</button>
  <p id="getPaymentAnswer"></p>
</div>

Answer 1

您有一个 div 和一个具有相同 id rateInput 的 input。因此，rateInput.value 尝试从 div 获取值，但它返回未定义。将 div 的 id 更改为其他内容，以在 rateInput 中获取正确的输入元素

var taxes = {
  getPayment: function(total, rate) {
    var payment = (total * rate);
    return payment;
  }
};

var handlers = {
  getPayment: function() {
    var totalInputTwo = document.getElementById('totalInputTwo');
    var rateInput = document.getElementById("rateInput");
    var answer = taxes.getPayment(+totalInputTwo.value, +rateInput.value);
    getPaymentAnswer.innerHTML = answer;
  }
};

<div id="getPayment">
  <div id="totalTwo">
    Total owed:
    <input id="totalInputTwo" type="text">
  </div>
  <div id="rate">
    Your tax rate (as a decimal):
    <input id="rateInput" type="text">
  </div>
  <button onclick="handlers.getPayment()">Get payment</button>
  <p id="getPaymentAnswer"></p>
</div>

注意:

输入的值始终为字符串格式。因此，在进行任何数学运算之前，您应该始终将它们解析为数字。当你相乘时，它们被强制转换为数字。所以，这里没有问题。但是，如果您要进行加法，则字符串将被连接，而不是添加它们的数值。

所以，您可以使用Unary plus operator将字符串转换为数字:

var answer = taxes.getPayment(+totalInputTwo.value, +rateInput.value);