2017-02-22 6 views
1

Я делаю форму, в которой я хочу автоматизировать некоторые вычисления. Форма содержит таблицу с некоторыми вводами. 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> 
+1

Где вы называете функцию «berekeningInkomenPerJaar»? – winseybash

+0

Я не уверен, как я могу вызвать/вызвать функцию. По-видимому, функция не запускается автоматически, так как я читаю https://www.w3schools.com/js/js_function_invocation.asp. Я хочу, чтобы функция запускалась/повторялась всякий раз, когда вводился заданный вход. В этом случае; 'fldInkomenPerMaand' – NielsSanders

ответ

1

Проблема ваша функция не является запуск при изменении входа.

Можно использовать функцию 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> 
+1

winseybash thanks, работает как шарм. – NielsSanders

 Смежные вопросы

  • Нет связанных вопросов^_^