JavaScript output returns undefined

Question

I recently started JavaScript and been working on a simple calculator for taxes, only problem that I have is that the output returns undefined instead of the expected value. For example, when I input 320000, the income tax should be 14000, but it returns undefined. I tried setting calculation to 0 but it didn't fix the problem. What makes my function not return the expected value? I looked at example programs given by my college that use variables within conditionals and they work fine, but mine isn't.

 function calculateTax() { var taxableIncome, calculation; taxableIncome = document.getElementById("t").value * 1; if (taxableIncome > 250000) { calculation = 0; } else if (taxableIncome > 250000 && taxableIncome < 40000) { calculation = (taxableIncome - 250000) * 0.20; } else if (taxableIncome > 400000 && taxableIncome < 800000) { calculation = ((taxableIncome - 400000) * 0.25) + 30000; } else if (taxableIncome > 800000 && taxableIncome < 2000000) { calculation = ((taxableIncome - 800000) * 0.30) + 130000; } else if (taxableIncome > 2000000 && taxableIncome < 8000000) { calculation = ((taxableIncome - 2000000) * 0.32); } else if (taxableIncome > 8000000) { calculation = ((taxableIncome - 8000000) * 0.35) + 2410000; } document.getElementById("inputTax").innerHTML = "The taxable income is:" +taxableIncome; document.getElementById("incomeTax").innerHTML = "The income tax is:" +calculation; }

 <h1>Income Tax Calculator</h1> <p> <label for = "t">Taxable Income</label> <input type = "number" id="t" name="t"> <button onclick = "calculateTax()"> Calculate Tax </button> </p> <h2 id="inputTax"></h2> <h2 id="incomeTax"></h2>

Answer 1

For the value 320000 , the condition is always true for taxableIncome > 250000 and returns 0 . Also, there is mismatch between the value 40000 (used in the second condition) and 400000 (used in the third condition).

You should change the following first two condition as:

if (taxableIncome < 250000) {

else if (taxableIncome > 250000 && taxableIncome < 400000) {

Please Note: You do not need to check the final condition ( taxableIncome > 8000000 ), only else will do.

Demo:

 function calculateTax() { var taxableIncome, calculation; taxableIncome = document.getElementById("t").value * 1; if (taxableIncome < 250000) { calculation = 0; } else if (taxableIncome > 250000 && taxableIncome < 400000) { calculation = (taxableIncome - 250000) * 0.20; } else if (taxableIncome > 400000 && taxableIncome < 800000) { calculation = ((taxableIncome - 400000) * 0.25) + 30000; } else if (taxableIncome > 800000 && taxableIncome < 2000000) { calculation = ((taxableIncome - 800000) * 0.30) + 130000; } else if (taxableIncome > 2000000 && taxableIncome < 8000000) { calculation = ((taxableIncome - 2000000) * 0.32); } else{ calculation = ((taxableIncome - 8000000) * 0.35) + 2410000; } document.getElementById("inputTax").innerHTML = "The taxable income is:" +taxableIncome; document.getElementById("incomeTax").innerHTML = "The income tax is:" +calculation; }

 <h1>Income Tax Calculator</h1> <p> <label for = "t">Taxable Income</label> <input type = "number" id="t" name="t"> <button onclick = "calculateTax()"> Calculate Tax </button> </p> <h2 id="inputTax"></h2> <h2 id="incomeTax"></h2>