CODEWITHSUNDEEP
javascriptcalculation
NielsSanders
NielsSanders

Reputation: 25

Javascript calculation won't start/isn't performed correctly

I'm making a form in which I want to automate some calculations. The form contains a table with some inputs. The Javascript is below the form. For a reason unknown to me, the calculation won't start or isn't performed correctly.

Here's the 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>

Upvotes: 1

Views: 45

Answers (1)

winseybash
winseybash

Reputation: 702

The problem is your function is not being run when the input is changed.

It is possible to use the JS addEventListener function to run your code whenever the input value is changed like so:

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

Your original code with the event listener added in:

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

Upvotes: 1

Related Questions