Simple Javascript tax calculator

Question

I am working on a tax calculator, and i don't get it to work. The only result i get is NaN, and I can't find what's wrong with my code. If the users input is 450 000 or more, the output is supposed to be 32% of their salary else 28%.

<!doctype html>
<html lang="en">
   <head>
     <meta charset="utf-8">  
     <meta name="description" content="Skatt">
     <meta name="author" content="Gandalf">  
     <title>Taxes</title>
   </head>
<body>
    <input type="text" id="salary" value="0" />
    <button id="button">Calculate tax!</button>
    <h2 id="salaryOut">Your salary is NOK:</h2>
    <h2 id="taxOut">You should pay taxes with the amount of:</h2>

<script>
    var button = document.getElementById("button");

    button.onclick = function() {

    var salary = document.getElementById("salary");
    salary.value = 0;

    var salaryOut = document.getElementById("salaryOut");
    salaryOut.value = salary;

    var salaryOut = document.getElementById("taxOut");
    taxOut.value = parseFloat(salaryOut.value);

    if(salaryOut.value<450000) {
        taxOut.value = salaryOut.value * .28;
    } 
    else {
        taxOut.value = salaryOut.value * .32;
    }
        salaryOut.innerHTML = ("Your salary is NOK: " + salary.value + ",-");   
        skattUt.innerHTML = "You should pay NOK: " + taxOut.value + ",-";
    }           
</script>   
</body>
</html>

You set `lonnUt.value = lonn;` where `lonn` is a document element, not a number. — 001, Oct 15 '15 at 15:15

David · Accepted Answer · 2015-10-15T15:28:59.183

You're performing all of your calculations right away as soon as the page loads, when there are no actual values to calculate. The only thing you're doing in your click handler is displaying the values that were already calculated.

Since there were no values to calculate when the page first loaded, that result is NaN.

Put all of your logic in the click handler:

var knapp = document.getElementById("knapp");

knapp.onclick = function() {

    var lonn = document.getElementById("lonn");

    var lonnUt = document.getElementById("lonnUt");
    var skattUt = document.getElementById("skattUt");

    var result = 0;

    if(lonn.value<450000) {
        result = lonn.value * .28;
    } 
    else {
        result = lonn.value * .32;
    }

    lonnUt.innerHTML = ("Lønnen din er kr: " + lonn.value + ",-");  
    skattUt.innerHTML = "Skatten din er kr: " + result + ",-";
}

That way you give the user a chance to input numbers before you try to perform calculations on those numbers.

(Note: I keep re-editing this because I'm having a lot of trouble deciphering the actual logic of what you're trying to do. The variable names don't help, since I don't speak that language. It's certainly possible that there are other problems here as well. But the main one is that you need to perform the calculations after the user types the values, not before.)

Edit: I've further modified the code here after finding another significant issue. You were trying to access a .value property on h2 elements, which doesn't exist. You were also trying to store information in those elements as though they were variables.

Instead, just declare a variable to store the result of your calculation. Get the input (lonn), perform the calculation and get a result (result), write the output to the HTML elements (lonnUt and skattUt).

Thank you for clearing that up! But i still get the NaN,- as output in the "skattUt.innerHTML = "Skatten din er kr: + skattUt.value + ",-";" — Blomshit, Oct 15 '15 at 15:25
@Blomshit: When you step through the code in a debugger, on which specific line do you see an unexpected value? — David, Oct 15 '15 at 15:26
@Blomshit: It looks like you're also trying to access a `.value` property of non-input HTML elements, which don't have such a property. I *think* I've understood what you're trying to do and have modified the code in the answer accordingly. Adding an explanation to the answer now... — David, Oct 15 '15 at 15:29
I have translated it to english now, so it is easier for you to understand! Thank you very much for helping! — Blomshit, Oct 15 '15 at 15:37

Simple Javascript tax calculator

1 Answers1