Why am I getting a NaN error when multiplying two numbers?

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>

Possible duplicate of [Why are duplicate ids not allowed in HTML](https://stackoverflow.com/questions/48240240/why-are-duplicate-ids-not-allowed-in-html) — str, May 26 '19 at 18:32

adiga · Answer 1 · 2019-05-26T18:53:25.733

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

@Graham you can [accept the answer](https://meta.stackexchange.com/a/5235/289255) by clicking on the grey icon next to the answer — adiga, May 26 '19 at 18:37

score 0 · Answer 2 · answered May 26 '19 at 18:47

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

Checking if input is number and if not number then what to show to the user in such cases.
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>

Why am I getting a NaN error when multiplying two numbers?

2 Answers2