1

我正在制作一个表格，我想在其中自动进行一些计算。该表单包含一个带有一些输入的表格。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>
4

1 回答 1

1

问题是当输入改变时你的函数没有运行。

addEventListener只要输入值发生更改，就可以使用 JS函数运行代码，如下所示：

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-22T11:40:35.317 回答