Menu
Here is my HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tip Calculator</title>
<link rel="stylesheet" href="midtermcss.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"</script>
<script src="midtermJS.js"></script>
</head>
<body>
<section>
<h1 id="heading">Tip Calculator</h1>
<label for="billAmount">Total Amount Of Bill:</label>
<input type="text" id="billAmount"><br>
<label for="percentTip">Percent To Tip:</label>
<input type="text" id="percentTip"><br>
<label for="amountPeople">How Many People?:</label>
<input type="text" id="amountPeople"><br>
<label for="totalTip">Tip Total:</label>
<input type="text" id="totalTip" disabled="disabled"><br>
<label> </label>
<input type="button" id="calculate" value="Calculate"><br>
</section>
</body>
</html>
The HTML I think is fine but it shows the names of everything that I think you would need to help me understand this button situation.
This is the JavaScript portion and I know the error is in here but I just can't seem to figure it out. After scouring the internet for 2 days and watching "how to create a button" tutorials over and over it is still not making sense to me. I click "Calculate" and nothing happens, so I know its with the button.
var $ = function (id) {
return document.getElementById(id);
}
var calculateClick = function () {
var billAmount = parseFloat( $("billAmount").value );
var percentTip = parseFloat( $("rate").value );
var amountPeople = parseInt( $("years").value );
if (isNaN(billAmount) || billAmount <= 0) {
alert("Your bill can't be 0 or less.");
}
else if(isNaN(percentTip) || percentTip <= 0) {
alert("The percentage should be a whole number.");
}
else if(isNaN(amountPeople) || amountPeople <= 0) {
alert("You are 1 person never count yourself as less.");
}
else {
var total = billAmount * (percentTip / 100) / amountPeople;
$("totalTip").value = total.toFixed(2);
}
}
window.onload = function () {
$("Calculate").onclick = calculateClick;
$("billAmount").focus();
}
601
asked Dec 29 '25 21:12
Check out this pen for a working version: http://codepen.io/anon/pen/avaRVm
First, case sensitivity, as mentioned in the comments: calculate does not equal Calculate.
The bigger problem is here:
var percentTip = parseFloat( $("rate").value );
var amountPeople = parseInt( $("years").value );
and here:
<label for="percentTip">Percent To Tip:</label>
<input type="text" id="percentTip"><br>
<label for="amountPeople">How Many People?:</label>
<input type="text" id="amountPeople"><br>
In your HTML, you don't use rate and years as IDs; you use percentTip and amountPeople. If you get those to match up, then your code will work.
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
