Why is my code for a tip Calculator returning NaN?

Question

Below is my code. I'm assuming the problem is coming from my function maybe involving a string where a number value should be or something of that nature. Pretty new at this so I can't quite pinpoint what exactly is causing the NaN response after hitting calculate. Thank you for your help.

console.log("Connected")

function calculateTip() {
  var billAmt = document.getElementById("price")
  var service = document.getElementById("service")
  var tip = document.getElementById("tip")
  var numOfPpl = document.getElementById("numOfPpl")
  // validate input
  if (billAmt === "" || service === 0) {
    alert("please enter values");
    return;
  }

  //check to see if this input is empty or less than or equal to 1
  if (numOfPpl === "" || numOfPpl <= 1) {
    numOfPpl = 1;
    document.getElementById("each").style.display = "none";
  } else {
    document.getElementById("each").style.display = "block";
  }


  // calculate tip
  var total = (billAmt * service) / numOfPpl;
  total = Math.round(total * 100) / 100;
  //next line allows us to always have two digits after a decimal point
  total = total.toFixed(2);
  //Display the tipdocument.getElementById("")
  document.getElementById("totalTip").style.display = "block"
  tip.innerHTML = total;
}

//hide tip amoiunt on load
document.getElementById("totalTip").style.display = "none"
document.getElementById("each").style.display = "none"


// click to  call funciton
document.getElementById("calculate").onclick = function() {

  calculateTip();
};

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>tip calculator</title>
</head>

<body>
  <div class="container">
    <h1>Tip calculator</h1>
    <form>
      <p id="quesiton">How much was your bill?</p>
      $ <input type="text" id="price" placeholder="Bill Amount">
      <p id="question">How was your service?</p>
      <select id="service">
        <option disabled selected value="0">Choose an Option</option>
        <option value="0.3">30% - Outstanding</option>
        <option value="0.2">20% - Good </option>
        <option value="0.15">15% - OK</option>
        <option value=".05">5% - Poor</option>
      </select>
    </form>
    <p>How many people are sharing the bill</p>
    <input id="numOfPpl" type="text" placeholder="Number of People" /> people
    <button type="button" id="calculate">Calculate!</button>

  </div>
  <div id="totalTip">
    <sup>$</sup><span id="tip">0.00</span>
    <small id="each">each</small>

  </div>

</body>

</html>

`document.getElementById("price")` Gets an *element*, not its *value*. You can't do math with an element. — , Jan 09 '20 at 19:43
Statements like `var numOfPpl = document.getElementById("numOfPpl")` return an actual DOM element, not the value of the element. You will need to call a `.value` to get the actual value. One thing to keep in mind is that the values will *always* be a string, so if you are comparing numbers, you will need to coerce to a number via the `+` operator, `parseInt/parseFloat`, or `Number()` — mhodges, Jan 09 '20 at 19:44

Matías Rodríguez · Answer 1 · 2020-01-09T20:56:23.323

0

The problem is that you are not declaring the variables correctly. You must add .valueto document.getElementById("id") in order to receive the value of the input or the select

edited Jan 09 '20 at 20:56

answered Jan 09 '20 at 19:47

Matías Rodríguez

225
2
10

2

"Taking the variables correctly"? – Jan 09 '20 at 19:54

score 0 · Answer 2 · answered Jan 09 '20 at 19:55

As per other responses, you need to fetch the value instead of elements by putting a .value at the end. I've fixed this here https://jsfiddle.net/vfcsh6qb/

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tip calculator</title>
</head>
<body>
    <div class="container">
    <h1>Tip calculator</h1>
    <form>
<p id="quesiton">How much was your bill?</p>
$ <input type="text" id="price" placeholder="Bill Amount">
<p id="question">How was your service?</p>
<select id="service">
    <option disabled selected value="0">Choose an Option</option>
    <option value="0.3">30% - Outstanding</option>
    <option value="0.2">20% - Good </option>
    <option value="0.15">15% - OK</option>
    <option value=".05">5% - Poor</option>
</select>
</form>
<p>How many people are sharing the bill</p>
<input id="numOfPpl" type="text" placeholder="Number of People"> people
<button type="button" id="calculate">Calculate!</button>



</div>
<div id="totalTip">
<sup>$</sup><span id="tip">0.00</span>
<small id="each">each</small>

</div>

<script type="text/javascript" src="tip.js"></script>

</body>
</html>

JS

console.log("Connected")
function calculateTip(){
var billAmt = document.getElementById("price").value;
var service = document.getElementById("service").value;
var tip = document.getElementById("tip").innerText;
var numOfPpl = document.getElementById("numOfPpl").value;
// validate input
if(billAmt === "" || service === 0){
    alert("please enter values");
    return;
}

//check to see if this input is empty or less than or equal to 1
if (numOfPpl === "" || numOfPpl <= 1){
numOfPpl = 1;
document.getElementById("each").style.display = "none";
} else {
    document.getElementById("each").style.display = "block";
}


// calculate tip
var total = (billAmt*service) / numOfPpl;
alert(total)
total = Math.round(total * 100) / 100;
//next line allows us to always have two digits after a decimal point
total = total.toFixed(2);
//Display the tipdocument.getElementById("")
document.getElementById("totalTip").style.display = "block"
tip.innerHTML = total;
}

//hide tip amoiunt on load
document.getElementById("totalTip").style.display = "none"
document.getElementById("each").style.display = "none"


// click to  call funciton
document.getElementById("calculate").onclick = function(){

    calculateTip();
};

Why is my code for a tip Calculator returning NaN?

2 Answers2