I found a few threads that were helpful, but nothing answered my question directly, so here's the specific issue:
To hone my limited jQuery skills I am creating a Split the Bill/Tip Calculator that calculates amounts on the click of a button based on the following inputs: Bill Total, Tip Percentage, Number of People.
However, nothing is happening when I click the button. Here's the jQuery code:
$(document).ready(function() {
$('button').click(function(){
var Total = $('.Total').val();
var Tip = $('.Tip').val();
var NumberOfPeople = $('.NumberOfPeople').val();
var AdjTotal = (((Tip/100)*Total)+Total).toFixed(2);
var Result = (AdjTotal/NumberOfPeople).toFixed(2);
if(isNaN(AdjTotal)) {
$('.result').remove();
$('.error').remove();
$('.price').append('<p class="error">Please enter valid numbers into the above fields.</p>');
}
else {
$('.error').remove();
$('.result').remove();
$('.price').append('<p class="result">Your total is $' + AdjTotal + ' ' + 'and each person owes: $' + Result + '.</p>');
}
});
});
And the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src='script.js'></script>
<title>Split the Bill</title>
</head>
<body>
<div class="header">
<h1>Split the Bill</h1>
</div>
<div>
<table>
<tbody>
<tr>
<td align="right">
Bill Total: $
</td>
<td text-align="left">
<input class="Total" type="text" name="Total">
</td>
</tr>
<tr>
<td align="right">
Tip Percentage:
</td>
<td text-align="left">
<input class="Tip" type="text" name="Tip"> %
</td>
</tr>
<tr>
<td align="right">
Number of People:
</td>
<td colspan=3>
<input class="NumberOfPeople" type="text" name="Number of People">
</td>
</tr>
<tr>
<td colspan=4 align="right">
<button>Calculate</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="price">
</div>
</body>
</html>
Thanks for any help!
The problem is this line:
var AdjTotal = (((Tip/100)*Total)+Total).toFixed(2);
Total is a string. You need to force it to be a number:
var AdjTotal = (((Tip/100)*Total)+Total/1).toFixed(2);