I'm working on an assignment for my web programming class where we need to create a budgeting program with 5 text fields and a button that calculates our expenses and whether or not we have enough money to cover them. A message stating the amount of money we have left over after paying our expenses is supposed to display after the button is clicked. The professor gave us a template that had most of the code written. The only part that wasn't written was the JavaScript, and our assignment was to write it. I looked back at past webpages I had made using JavaScript (the professor gave us the JavaScript in those cases), and used that as a base for writing the JavaScript for my current assignment. I'm fairly certain that I wrote all the code correctly. The issue I'm experiencing is when I click the button, no messages are displaying below. Here's the code I typed up to make the page.
<head>
<title></title>
<style type="text/css">
body {
background-color: #454F8C;
font-family: arial;
color: #454F8C;
}
#contentwrap {
background: #F4F5E7;
border: 8px #FF9E01 solid;
padding: 20px;
width: 600px;
margin: 20px auto 0px auto;
border-radius: 25px;
text-align: center;
}
#heading {
font-size: 2.2em;
border-bottom: 6px #484452 double;
padding: 10px 0px 10px 0px;
}
.formtext {
margin-top: 8px;
margin-left: 203px;
width: 200px;
}
.formfield {
padding: 4px;
border: 2px darkred solid;
font-size: 1.2em;
color: red;
font-weight: bold;
}
#calcbutton {
background: #003366;
color: #FFFFFF;
padding: 5px 0px 5px 0px;
width: 150px;
border: 3px #CCCC99 solid;
border-radius: 25px;
cursor: pointer;
font-size: 1.1em;
}
#calcbutton:hover {
background: #CCCCCC;
color: #003366;
border: 3px #003366 solid;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#tempbutton").on( "click", function(){
var ename = $("#name").val();
var mbudget = $("#budget").val();
var mfood = $("#food").val();
var mgas = $("#gas").val();
var ment = $("#entertainment").val();
var total = mfood + mgas + ment;
var remainder = budget - total;
msg += "<div>Name is " + ename + "</div>";
msg += "<div>Monthly budget is $" + mbudget + "</div>";
msg += "<div>Food expense is $" + mfood + "</div>";
msg += "<div>Gas expense is $" + mgas + "</div>";
msg += "<div>Entertainment expense is $" + ment + "</div>";
msg += "<div>Total money left after expenses is $" + remainder + "</div>";
if ( remainder < 0 ){
msg += "<div>You DO NOT have enough money to cover your expenses</div>"
}
else{
msg += "<div>You have enough money to cover your expenses</div>"
}
$("#output").html( msg );
});
}); // document.ready
</script>
</head>
<body>
<div id="contentwrap">
<div id="heading">Household Budget Calculator</div>
<form>
<div class="formtext">Enter name</div>
<input type="text" class="formfield" id="name">
<div class="formtext">Enter monthly budget</div>
<input type="text" class="formfield" id="budget">
<div class="formtext">Enter monthly food expense</div>
<input type="text" class="formfield" id="food" >
<div class="formtext">Enter monthly gas expense</div>
<input type="text" class="formfield" id="gas">
<div class="formtext">Enter monthly entertainment expense</div>
<input type="text" class="formfield" id="entertainment">
<div style="margin-top: 10px;">
<input type="button" value="Calculate Budget" id="calcbutton">
</div>
</form>
<div id="output" style="margin-top:10px;"></div>
</div> <!-- ends div#contentwrap -->
</body>
</html>
If you can spot any issues in my code, please point them out.
