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();
}
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments