2015-10-15 215 views
-1

我正在一个税务计算器,我不明白它的工作。我得到的唯一结果是NaN,而且我找不到我的代码出了什么问题。如果用户的投入是45万或更多,那么产出应该是他们工资的32%,否则是28%。简单的Javascript税计算器

<!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> 
+1

您设置了'lonnUt.value = lonn;'其中'lonn'是一个文档元素,而不是一个数字。 –

回答

0

你马上尽快执行所有的计算作为页面加载,当有来计算没有实际价值。您在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元素(lonnUtskattUt)。

+0

谢谢你清理那个!但是我仍然得到了NaN, - 作为“skattUt.innerHTML =”skatten din er kr:+ skattUt.value +“的输出结果,” - “;” – Blomshit

+0

@Blomshit:当您在调试器中执行代码时,你看到一个意想不到的值? – David

+0

@Blomshit:它看起来像你也试图访问非输入HTML元素的'.value'属性,它没有这样的属性。你已经明白了你正在做什么,并且已经修改了答案中的代码。现在给答案添加一个解释... – David