2

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>
Matt
  • 5,315
  • 1
  • 30
  • 57
Max Costes
  • 21
  • 1
  • 5
    `document.getElementById("price")` Gets an *element*, not its *value*. You can't do math with an element. –  Jan 09 '20 at 19:43
  • 2
    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

2 Answers2

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

0

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();
};
onepoordeveloper
  • 199
  • 1
  • 5
  • 15