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>