Argthtjtr

I am attempting to make a tip calculator, this takes in the total cost of the meal a tip (through a button) and the total amount of people. Although when I am attempting to get the value of the button to do my calculation I am unable to do so.

I have tried to just run the function on load although that only gives me the value of the button once when the page loads and not when it has been clicked.

What I am trying to do is know when the button has been pressed, take the value from it and then use that for my further calculations although when attempting to do so the variable is undefined and I can not use it in my main calculations function.

How would I go about solving this?

Jsfiddle

HTML

<h1>Tip Calculator</h1>

<div class="inputs">

  <input type="number" id="bill-amount" placeholder="Bill">

  <div id="buttons">

    <button value="5" class="btn">5%</button>

    <button value="10" class="btn">10%</button>

    <button value="15" class="btn">15%</button>

    <button value="20" class="btn">20%</button>

    <button value="30" class="btn">30%</button>

  </div>

  <input type="number" id="people-amount" placeholder="# Of people" onkeyup="tipCalculator()">

</div>

JS

$("button").click(function() {

   var buttonValue = $(this).val();

   console.log(buttonValue);

});



function tipCalculator() {

   var billAmount = $("#bill-amount").val();

   var peopleAmount = $("#people-amount").val();

   var total = (billAmount * buttonValue) / peopleAmount;

   total = Math.round(total * 100) / 100;

   total = total.toFixed(2);

}

You should use a global var, and then you can read it all the time. Just declare it out of your function and is done:

var buttonValue;



$("button").click(function() {

   buttonValue= $(this).val();

  console.log(buttonValue);

});

Call it in button click listener. Make tipCalculator receive one param and pass buttonValue value.

function tipCalculator(buttonValue) {

   var billAmount = $("#bill-amount").val();

   var peopleAmount = $("#people-amount").val();

   var total = (billAmount * buttonValue) / peopleAmount;

   total = Math.round(total * 100);

   total = total.toFixed(2);

   alert(total);

}



$("button").click(function() {

   var buttonValue = $(this).val();

   console.log(buttonValue);

   tipCalculator(buttonValue);

});

In my opinion button is the wrong element for this. It does not maintain state and it does not show your users what they have selected. Use radio buttons instead. This is even more important should the data be send back to a server for processing at any-point as the selected tip value would be lost without persisting it into another form field.

function tipCalculator() {

  var billAmount = $("#bill-amount").val();

  var peopleAmount = $("#people-amount").val();

  //Get the tip value

  var tip = $("[name=rdoTip]:checked").val();  

  tip = (tip/100) + 1;

  console.log("Tip: " + tip);

  var total = (billAmount * tip) / peopleAmount;

  

  total = Math.round(total * 100) / 100 * 2;

  total = total.toFixed(2);

  console.log(total);

}

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

<h1>Tip Calculator</h1>

<div class="inputs">

  <input type="number" id="bill-amount" placeholder="Bill">

  <fieldset>

    <legend>Tip</legend>

    <input type="radio" name="rdoTip" value="0" id="rdoTip0" checked /><label for="rdoTip0">0%</label>

    <input type="radio" name="rdoTip" value="5" id="rdoTip5" /><label for="rdoTip5">5%</label>

    <input type="radio" name="rdoTip" value="10" id="rdoTip10" /><label for="rdoTip10">10%</label>

    <input type="radio" name="rdoTip" value="15" id="rdoTip15" /><label for="rdoTip15">15%</label>

    <input type="radio" name="rdoTip" value="20" id="rdoTip20" /><label for="rdoTip20">20%</label>

    <input type="radio" name="rdoTip" value="30" id="rdoTip30" /><label for="rdoTip30">30%</label>

  </fieldset>

</div>

<input type="number" id="people-amount" placeholder="# Of people" onkeyup="tipCalculator()">

You can make this a little prettier using CSS

function tipCalculator() {

  var billAmount = $("#bill-amount").val();

  var peopleAmount = $("#people-amount").val();

  //Get the tip value

  var tip = $("[name=rdoTip]:checked").val();  

  tip = (tip/100) + 1;

  console.log("Tip: " + tip);

  var total = (billAmount * tip) / peopleAmount;

  

  total = Math.round(total * 100) / 100 * 2;

  total = total.toFixed(2);

  console.log(total);

}

fieldset.tips {border:none; padding-left:0; margin-top:5px;}

fieldset.tips  legend {margin-left:0;}

fieldset.tips input[type="radio"] {display:none}

fieldset.tips label{padding:5px; border: solid red 1px; margin: 0 2px; border-radius: 5px; width: 40px; display:inline-block; text-align:center;}

fieldset.tips input:checked + label {background-color:red; font-weight:bold; color: #FFF;

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

<h1>Tip Calculator</h1>

<div class="inputs">

  <input type="number" id="bill-amount" placeholder="Bill">

  <fieldset class="tips">

    <legend>Tip</legend>

    <input type="radio" name="rdoTip" value="0" id="rdoTip0" checked /><label for="rdoTip0">0%</label>

    <input type="radio" name="rdoTip" value="5" id="rdoTip5" /><label for="rdoTip5">5%</label>

    <input type="radio" name="rdoTip" value="10" id="rdoTip10" /><label for="rdoTip10">10%</label>

    <input type="radio" name="rdoTip" value="15" id="rdoTip15" /><label for="rdoTip15">15%</label>

    <input type="radio" name="rdoTip" value="20" id="rdoTip20" /><label for="rdoTip20">20%</label>

    <input type="radio" name="rdoTip" value="30" id="rdoTip30" /><label for="rdoTip30">30%</label>

  </fieldset>

</div>

<input type="number" id="people-amount" placeholder="# Of people" onkeyup="tipCalculator()">