this is an exercise from Murach's Javascript and Jquery book. An income tax calculator. The code is pretty self explanatory. The error: undefined is popping up where the value of the tax owed should be. commented out if statement outputted the same 'undefined' error. The documentation said, undefined usually is outputted when a variable isn't assigned or returned and i've done all that.
JS
"use strict";
var $ = function (id) {
return document.getElementById(id);
};
var income;
var taxOwed;
var calculateTax = function(income){
/*if (income > 0 && income < 9275){
//incomeTax = taxableIncome - 0;
//percentIT = incomeTax * (10/100);
taxOwed = (income - 0) * (10/100) + 0;
taxOwed = parseFloat(taxOwed);
taxOwed = taxOwed.toFixed(2); //the tax should be rounded two
return taxOwed;
}*/
if (income < 9275){
taxOwed = income - 0 * .10 + 0;
}else if(income > 9275){
taxOwed = ((income - 9275) * .15) + 927.50;
}
return taxOwed;
};
var processEntry = function(){
income = parseInt($("income").value); //users entry should be converted
if(isNaN(income)){
alert("Entry must be a number");
}else if (income <= 0){
alert("income must be greater than 0");
}else{
$("taxOwed").value = calculateTax(income);
}
};
window.onload = function () {
$("calculate").onclick = processEntry;
$("income").focus();
};
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ace</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Income Tax Calculator</h1>
<label>Enter taxable income:</label>
<input type="text" id="income" /> <!--income is variable name for taxable income-->
<input type="button" value="Calculate" name="calculate" id="calculate" /><br><br>
<label>Income tax owed:</label>
<input type="text" id="taxOwed"><br> <!--tax is variable name for taxOwed*-->
<script src="calculate_tax.js"></script>
</body>
</html>