Javascript 计算不会 start/isn 执行不正确

Question

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

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

Javascript 计算不会 start/isn 执行不正确

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

javascript

calculation