简单 Javascript 税收计算器

Question

我正在研究税务计算器，但我无法使用它。我得到的唯一结果是 NaN，我找不到我的代码有什么问题。如果用户输入是 450 000 或更多，输出应该是他们工资的 32% 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>

Answer 1

当页面加载时，您正在立即执行所有计算，而没有要计算的实际值.您在 click 处理程序中所做的唯一一件事就是显示已经计算出的值。

由于首次加载页面时没有要计算的值，因此结果为 NaN。

将所有逻辑放在点击处理程序中：

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 + ",-";
}

这样您就可以在尝试对这些数字执行计算之前让用户有机会输入数字。

（注意：我一直在重新编辑它，因为我在破译你正在尝试做的事情的实际逻辑时遇到了很多的麻烦。变量名不帮不上忙，因为我不会说那种语言。这里当然也可能存在其他问题。但最主要的是您需要执行计算在用户键入值之后，而不是之前。）

编辑： 在发现另一个重要问题后，我进一步修改了这里的代码。您试图访问 h2 元素上的 .value 属性，但该元素不存在。您还试图将信息存储在这些元素中，就好像它们是变量一样。

相反，只需声明一个变量来存储您的计算结果。获取输入（lonn），执行计算并得到结果（result），将输出写入HTML元素（lonnUt和skattUt） .

简单 Javascript 税收计算器

Simple Javascript tax calculator

calculator

tax