我正在制作一个表单，我想在其中自动执行一些计算。该表单包含一个带有一些输入的表。 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>
最佳答案
问题是当输入更改时您的函数没有运行。
只要输入值发生更改，就可以使用 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 计算无法启动/未正确执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42389909/