My tip calculator code is not working. Where is the error in the code?

Garry 0
Viewed 37

The two problems that i think with the code are that its not saving the input values therefore the the code is not displaying any result and secondly from the dropdown list only first option gets selected everytime. Kindly let me know the errors in the code. I am new to coding.

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Tip Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css"  />
  </head>
  <body>
    <form>

      <div class="mb-3">
        <label  class="total form-label">Total Bill</label>
        <input type="number" class="form-control" id="bill" >
        <div id="emailHelp" class="form-text">Please Enter your bill in numbers only.</div>
      </div>
      <div class="mb-3">
        <label class="form-label">Number of People</label>
        <input type="number" class="form-control" id="people">
      </div>
      <!-- <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
      </div> -->
      <select class="form-select" id="myValues">
        <option value="30%">Select the service quality</option>
    <option value="30%">30% - Outstanding</option>
    <option value="20%">20% - Good</option>
    <option value="15%">15% - it was okay</option>
    <option value="5%">5% - Terrible</option>
  </select>
      <button type="submit" class="btn btn-primary">Calculate</button>
    </form>
    <div id="totalTip">
                       <sup>$</sup><span class="form-label" id="tip">0.00</span>
                       <small id="each">each</small>

               </div>

  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="tip.js" charset="utf-8"></script>
</html>

This is the javascript code

var a = $("#bill").val();
var b = $("#people").val();
var c = $("#myValues").find('option:selected').val();

$(".btn").click(function () {
$("#tip").html(calculateTip(a, b, c));
});
function calculateTip (total, people, select) {
     var d = total/people;
     var e = d*(select/100);
     return e;
}
// calculateTip(a, b, c)
calculator math jquery javascript html
1 Answers

A couple of issues stand out.

  1. you define a, b, and c at the beginning of the script, before the user has interacted with the form. We should define then inside the click handler, this way they will be evaluated and set when the button is clicked.

  2. You may want to add a e.preventDefault(); inside the click handler to stop the default submit behavior (ie stop it from trying to submit the form)

  3. You don't need to find the selected option for #myValues, you can access the currently selected value directly via $("#myValues").val()

  4. You'll want to remove the % from the option values so you can do math with the value (You'll get NaN with the % in place which makes the value a string.

  5. You'll likely want to add a .toFixed(2) to the tip result to force it to round to and truncate at 2 decimal places to avoid long repeating decimals

$(".btn").click(function(e) {
  e.preventDefault();
  let a = $("#bill").val();
  let b = $("#people").val();
  let c = $("#myValues").val();
  let tip = calculateTip(a, b, c);
  $("#tip").html(tip);
});

function calculateTip(total, people, select) {
  var d = total / people;
  var e = d * (select / 100);
  return e.toFixed(2);
}
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>Tip Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <form>

      <div class="mb-3">
        <label class="total form-label">Total Bill</label>
        <input type="number" class="form-control" id="bill">
        <div id="emailHelp" class="form-text">Please Enter your bill in numbers only.</div>
      </div>
      <div class="mb-3">
        <label class="form-label">Number of People</label>
        <input type="number" class="form-control" id="people">
      </div>
      <!-- <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
      </div> -->
      <select class="form-select" id="myValues">
        <option value="30">Select the service quality</option>
        <option value="30">30% - Outstanding</option>
        <option value="20">20% - Good</option>
        <option value="15">15% - it was okay</option>
        <option value="5">5% - Terrible</option>
      </select>
      <button type="submit" class="btn btn-primary">Calculate</button>
    </form>
    <div id="totalTip">
      <sup>$</sup><span class="form-label" id="tip">0.00</span>
      <small id="each">each</small>

    </div>

  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</html>

Wesley Smith0
Related