为什么将两个数字相乘时会出现 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 和一个input 具有相同的ID rateInput。所以，rateInput.value 试图从div 获取value 并且它返回未定义。将 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);

Answer 2

在进行一些计算之前，您应该在输入中添加一些验证。 验证如：

1. 检查输入是否为数字，如果不是数字，则在这种情况下向用户显示什么。
2. 如果输入为空，然后用户点击按钮计算结果。

你应该先处理这些情况，然后你的代码才能更好地工作。

@adiga 解决了代码中的错误，但我提供了一种验证输入的方法：

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

var isNumber = function(value) {
  return /^\d+$/.test(value.trim())
}

var handlers = {
  getPayment: function() {
    var totalInputTwo = document.getElementById('totalInputTwo');
    var rateInput = document.getElementById("rateInput");
    
    // validating code
    var totalInputTwo_value = totalInputTwo.value.trim()
    if(isNumber(totalInputTwo.value) && isNumber(rateInput.value)) {
        var answer = taxes.getPayment(totalInputTwo.value, rateInput.value);
       getPaymentAnswer.innerHTML = answer;
    } else {
      alert("Input is not number of empty. Please check!");
    }
    // console.log(typeof totalInputTwo.value);
    
  }
};

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