Tip calculator keeps returning Nan. How do I fix it?

Question

I am trying to do my first JS app and unfortunately JS returns NaN value instead of desired amount. I bet solution is quite simple, although I kept trying to resolve problem on my own for past 2 hours and nothing works...

function calculateTip () {
var cost = document.querySelector('.amount').value;
var service = document.querySelector('.service').value;
var people = document.querySelector('.numOfPeo').value;

var tip = (cost * service) / people;

if (cost === "" || service === 0) {
    alert("Please enter values");
  }
  if (people === "" || people <= 1) {
    people = 1;
  }
  document.getElementById('totalTip').style.display = "block";
  document.getElementById('tip').innerHTML = tip;
}

btn.addEventListener('click', calculateTip);

  <div class="container">
      <h1>Tip Calculator</h1>
      <div class="descr-1"><p>How Much was your bill?</p></div>
      <div class="input-1 amount"><input type="text" placeholder="Bill Amount in £"></div>
      <div class=descr-2><p>How was your service?</p></div>
      <div class="select"> <select class="service">
          <option disabled selected value="0">Choose an Option</option>
          <option value="30">Extraordinary! - 30%</option>
          <option value="20">Amazing! - 20%</option>
          <option value="15">Good - 15%</option>
          <option value="10">Was Ok - 10%</option>
          <option value="5">Awful! - 5%</option>
      </select></div>
      <div class="descr-3">How many people sharing a bill?</div>
      <div class="people numOfPeo"> <input type="text" placeholder="Number of People"></div>
      <button id="btn">Calculate!</button>
      <div class="total">
          <div id="totalTip">
              <sup>$</sup><span id="tip">0.00</span>
              <small id="each">each</small>
            </div>
  </div>

When you read the `value` property of an element, it returns a string. Convert them to numbers using the unary `+` operator or `parseInt()`. — Terry, Mar 08 '20 at 15:14
Why is ' if (people === "" || people <= 1) { people = 1;' after 'var tip = (cost * service) / people;'? — JMP, Mar 08 '20 at 15:17
@Terry - Although in the above, since only `*` and `/` are used, they'll be converted to numbers implicitly. Still, better to be explicit. tomgru23, [my answer here](https://stackoverflow.com/questions/28994839/why-does-string-to-number-comparison-work-in-javascript/28994875#28994875) lists the various different ways to do that. — T.J. Crowder, Mar 08 '20 at 15:20
transform your inputs to actual numbers from strings (given you get them correctly in the first place) by using `parseFloat` or `parseInt` built-in functions of Javascript. **Initialy the inputs are text, strings they are not numbers which can be added or multiplied so you need to transform them to numbers first else result will be Nan = Not a number** — Nikos M., Mar 08 '20 at 15:36

score 2 · Answer 1 · answered Mar 08 '20 at 15:36

You just have a small issue with the class, it should be on the inputs and not on the div. I have fixed it here, on my jsfiddle:

 <div class="container">
  <h1>Tip Calculator</h1>
  <div class="descr-1"><p>How Much was your bill?</p></div>
  <div class="input-1"><input type="text" placeholder="Bill Amount in £" class="amount"></div>
  <div class=descr-2><p>How was your service?</p></div>
  <div class="select"> <select class="service">
      <option disabled selected value="0">Choose an Option</option>
      <option value="30">Extraordinary! - 30%</option>
      <option value="20">Amazing! - 20%</option>
      <option value="15">Good - 15%</option>
      <option value="10">Was Ok - 10%</option>
      <option value="5">Awful! - 5%</option>
  </select></div>
  <div class="descr-3">How many people sharing a bill?</div>
  <div class="people"> <input type="text" placeholder="Number of People" class="numOfPeo"></div>
  <button id="btn">Calculate!</button>
  <div class="total">
      <div id="totalTip">
          <sup>$</sup><span id="tip">0.00</span>
          <small id="each">each</small>
        </div>

and you should move the validation before the calculation of the tip:

function calculateTip () {
var cost = document.querySelector('.amount').value;
var service = document.querySelector('.service').value;
var people = document.querySelector('.numOfPeo').value;


if (cost === "" || service === 0) {
    alert("Please enter values");
  }
  if (people === "" || people <= 1) {
    people = 1;
  }
  var tip = cost * service/ people;

  document.getElementById('totalTip').style.display = "block";
  document.getElementById('tip').innerHTML = tip;
}

btn.addEventListener('click', calculateTip);

https://jsfiddle.net/arielbo/qaf6eygc/13/

score 1 · Answer 2 · answered Mar 08 '20 at 15:24

The first element with the class amount in your HTML is a div, not an input. The input is inside the div. So cost is undefined, since divs don't have a value. The same problem occurs with people, because again the .numOfPeo is on the div, not the input.

You need to target your inputs. Without changing your HTML, you can use a descendant child selector:

var cost = document.querySelector('.amount input').value;
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^
var service = document.querySelector('.service').value;
var people = document.querySelector('.numOfPeo input').value;
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^

Live Example:

function calculateTip () {
var cost = document.querySelector('.amount input').value;
var service = document.querySelector('.service').value;
var people = document.querySelector('.numOfPeo input').value;
var tip = (cost * service) / people;

if (cost === "" || service === 0) {
    alert("Please enter values");
  }
  if (people === "" || people <= 1) {
    people = 1;
  }
  document.getElementById('totalTip').style.display = "block";
  document.getElementById('tip').innerHTML = tip;
}

btn.addEventListener('click', calculateTip);

<div class="container">
      <h1>Tip Calculator</h1>
      <div class="descr-1"><p>How Much was your bill?</p></div>
      <div class="input-1 amount"><input type="text" placeholder="Bill Amount in £"></div>
      <div class=descr-2><p>How was your service?</p></div>
      <div class="select"> <select class="service">
          <option disabled selected value="0">Choose an Option</option>
          <option value="30">Extraordinary! - 30%</option>
          <option value="20">Amazing! - 20%</option>
          <option value="15">Good - 15%</option>
          <option value="10">Was Ok - 10%</option>
          <option value="5">Awful! - 5%</option>
      </select></div>
      <div class="descr-3">How many people sharing a bill?</div>
      <div class="people numOfPeo"> <input type="text" placeholder="Number of People"></div>
      <button id="btn">Calculate!</button>
      <div class="total">
          <div id="totalTip">
              <sup>$</sup><span id="tip">0.00</span>
              <small id="each">each</small>
            </div>
  </div>

...but I'd probably change the HTML instead.

I'd also recommend explicitly converting cost, service, and people to numbers rather than relying on implicit conversion. My answer here outlines your various options for doing that and their tradeoffs.

Also note that you need to divide service by 100 to make it a percentage ("percent" literally "for each hundred"). Otherwise, these tips are going to be massive. ;-)

Tip calculator keeps returning Nan. How do I fix it?

2 Answers2