我正在制作一个税务计算器,而我却没有让它上班。我得到的唯一结果是NaN,我无法找到我的代码有什么问题。如果用户输入为450 000或更多,则输出应为其工资的32%,否则为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>
答案 0 :(得分: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 + ",-";
}
这样,您可以在尝试对这些数字执行计算之前为用户提供输入数字的机会。
(注意:我一直在重新编辑这个,因为我有一个很多无法解读你正在尝试做的事情的实际逻辑。变量名称不在&# 39; t help,因为我不会说那种语言。这里也有可能存在其他问题。但主要的一点是你需要执行计算用户之后用户输入值,而不是之前。)
编辑:在找到另一个重要问题后,我在这里进一步修改了代码。您试图访问.value
元素上的h2
属性,但这些元素并不存在。您还试图将信息存储在这些元素中,就像它们是变量一样。
相反,只需声明一个变量来存储计算结果。获取输入(lonn
),执行计算并获得结果(result
),将输出写入HTML元素(lonnUt
和skattUt
)。