2015-10-15 209 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