為什么兩個數字相乘會出現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獲取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運算符將字符串轉換為數字：

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>