Le calcul Javascript ne démarre pas/n'est pas effectué correctement

Je crée un formulaire dans lequel je veux automatiser certains calculs. Le formulaire contient une table avec quelques entrées. Le Javascript est sous le formulaire. Pour une raison inconnue, le calcul ne démarre pas ou n'est pas effectué correctement.Le calcul Javascript ne démarre pas/n'est pas effectué correctement

Voici le code:

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

Source

2017-02-22 NielsSanders

Où appelez-vous la fonction 'berekeningInkomenPerJaar'? – winseybash

Je ne sais pas comment appeler/invoquer une fonction. Apparemment, une fonction ne démarre pas automatiquement, comme je l'ai lu sur https://www.w3schools.com/js/js_function_invocation.asp. Je souhaite que la fonction démarre/répète chaque fois que l'entrée donnée est entrée. Dans ce cas; 'fldInkomenPerMaand' – NielsSanders

Le problème est votre fonction n'est pas en cours d'exécution lorsque l'entrée est modifiée.

Il est possible d'utiliser la fonction JS addEventListener pour exécuter votre code chaque fois que la valeur d'entrée est modifiée comme ceci:

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

Votre code d'origine avec l'écouteur d'événement ajouté:

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

Source

2017-02-22 11:40:35 winseybash

winseybash merci, fonctionne comme un charme. – NielsSanders

Le calcul Javascript ne démarre pas/n'est pas effectué correctement

Répondre

Questions connexes