Javascript計算將無法啓動/未正確執行

我正在製作一個表單，我希望自動化一些計算。該表格包含一個包含一些輸入的表格。 Javascript在表單下方。由於我未知的原因，計算不會啓動或執行不正確。Javascript計算將無法啓動/未正確執行

下面的代碼：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>test</title> 
</head> 

<body> 
<form> 
    <fieldset> 
    <legend>Inkomsten</legend> 
     <table> 
     <tr> 
     <th scope="col"></th> 
     <th scope="col">Per maand</th> 
     <th scope="col">Per jaar</th> 
     <th scope="col">Totale termijn</th> 
     </tr> 
     <tr> 
     <td>Inkomen</td> 
     <td><input type="text" name="fldInkomenPerMaand" id="fldInkomenPerMaand"></td> 
     <td><input type="text" name="fldInkomenPerJaar" id="fldInkomenPerJaar" disabled></td> 
     <td><input type="text" name="fldInkomenTotaleTermijn" id="fldInkomenTotaleTermijn" disabled></td> 
     </tr> 
     <tr> 
     <td>Vakantiegeld</td> 
     <td><input type="text" name="vakantiegeldPerMaand" id="vakantiegeldPerMaand" disabled></td> 
     <td><input type="text" name="vakantiegeldPerJaar" id="vakantiegeldPerJaar"></td> 
     <td><input type="text" name="vakantiegeldTotaleTermijn" id="vakantiegeldTotaleTermijn" disabled></td> 
     </tr> 
    </table> 
    </fieldset> 
</form> 

<script type="text/javascript"> 
function berekeningInkomenPerJaar() { 
    var inkomenPerMaand = parseInt(document.getElementById("fldInkomenPerMaand").value); 

    var inkomenPerJaar = document.getElementById("fldInkomenPerJaar"); 
     inkomenPerJaar.value = inkomenPerMaand * 12; 
} 
</script> 

</body> 
</html>

來源

2017-02-22 NielsSanders

在哪裏你稱之爲'berekeningInkomenPerJaar'功能嗎？ – winseybash

我不知道如何調用/調用一個函數。顯然，一個函數不會自動啓動，因爲我在https://www.w3schools.com/js/js_function_invocation.asp上閱讀。我希望函數在輸入給定輸入時開始/重複。在這種情況下; 'fldInkomenPerMaand' – NielsSanders

的問題是你的函數沒有運行時，輸入被改變。

每當輸入值發生變化，像這樣有可能使用JS addEventListener功能來運行代碼：

var inputElement = document.getElementById("fldInkomenPerMaand"); 
inputElement.addEventListener("change", berekeningInkomenPerJaar);

中加入你的原代碼與事件監聽器：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>test</title> 
</head> 

<body> 
<form> 
    <fieldset> 
    <legend>Inkomsten</legend> 
     <table> 
     <tr> 
     <th scope="col"></th> 
     <th scope="col">Per maand</th> 
     <th scope="col">Per jaar</th> 
     <th scope="col">Totale termijn</th> 
     </tr> 
     <tr> 
     <td>Inkomen</td> 
     <td><input type="text" name="fldInkomenPerMaand" id="fldInkomenPerMaand"></td> 
     <td><input type="text" name="fldInkomenPerJaar" id="fldInkomenPerJaar" disabled></td> 
     <td><input type="text" name="fldInkomenTotaleTermijn" id="fldInkomenTotaleTermijn" disabled></td> 
     </tr> 
     <tr> 
     <td>Vakantiegeld</td> 
     <td><input type="text" name="vakantiegeldPerMaand" id="vakantiegeldPerMaand" disabled></td> 
     <td><input type="text" name="vakantiegeldPerJaar" id="vakantiegeldPerJaar"></td> 
     <td><input type="text" name="vakantiegeldTotaleTermijn" id="vakantiegeldTotaleTermijn" disabled></td> 
     </tr> 
    </table> 
    </fieldset> 
</form> 

<script type="text/javascript"> 
function berekeningInkomenPerJaar() { 
    var inkomenPerMaand = parseInt(document.getElementById("fldInkomenPerMaand").value); 

    var inkomenPerJaar = document.getElementById("fldInkomenPerJaar"); 
     inkomenPerJaar.value = inkomenPerMaand * 12; 
} 

var inputElement = document.getElementById("fldInkomenPerMaand"); 
inputElement.addEventListener("change", berekeningInkomenPerJaar); 
</script> 

</body> 
</html>

來源

2017-02-22 11:40:35 winseybash

winseybash謝謝，作品像一個魅力。 – NielsSanders

Javascript計算將無法啓動/未正確執行

回答

相關問題