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

Question

My getPercentage function works perfectly, but my getPayment function doesn't even though it's written exactly the same. When I click the "Get Payment" button it returns "NaN" on my HTML.

 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

You have a div and an input with the same id rateInput . So, rateInput.value is trying to get the value from the div and it's returning undefined. Change the div's id to something else to get the correct input element in 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> 

Note:

The value of input is always in string format. So, you should always parse them to numbers before doing any mathematical operation. When you multiply, the are coerced into numbers. So, there's no problem here. But, if you were to do addition, the strings will be concatenated instead of their numerical values being added.

So, you can use the Unary plus operator to convert the strings to numbers:

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

Answer 2

You should add some validation to your input before doing some calculations. Validations like:

1. Checking if input is number and if not number then what to show to the user in such cases.
2. If input is empty and then user clicks button to calculate result.

You should handle these situations first, then your code will work better.

The bug in code is solved by @adiga, but I am providing one of the ways t validate input:

 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>