时间戳

首页 > 解决方案 > 在 vanilla javascript 中使用 onchange 事件更新多个变量

javascript - 在 vanilla javascript 中使用 onchange 事件更新多个变量

问题描述

我有一系列函数，它们接受多个输入并生成多个输出。当任何输入发生变化时，所有输出也应该发生变化。javascript如下：

function calcOne(a,b,c){
return a+b+c
}
function calcTwo(c,d){
return c*d
}
function calcThreee(d,e){
return d+e
}
var a = parseFloat(document.getElementByID('a').value);
var b = parseFloat(document.getElementByID('b').value);
var c = parseFloat(document.getElementByID('c').value);
var d = parseFloat(calcOne(a,b,c));
var e = parseFloat(calcTwo(c,d));
var f = parseFloat(calcThree(d,e));
document.getElementbyId("result_d").innerHTML = d;
document.getElementbyId("result_e").innerHTML = e;
document.getElementbyId("result_f").innerHTML = f;

因此，当输入 a、b 或 c 中的任何一个发生变化时，d、e 和 f 的结果都会发生变化。

对应的html是：

<html>
<body>
<form id="myForm">
  <input id='a' value="1"><br>
  <input id='b' value="2"><br>
  <input id='c' value="3"><br>
</form>
<p id="result_d"></p>
<p id="result_e"></p>
<p id="result_f"></p>
<script src="myScript.js"></script>
</body>
</html>

如何添加事件侦听器，以便对表单输入 a、b、c 的任何更改都会导致显示的结果 d、e 和 f 被更新？请注意，在我的实际代码（不是上面的示例）中，大约有 50 个变量和 50 个函数，但如果这很重要，那么所有的计算量都非常小（不比上面显示的多）。

标签： javascripthtml

解决方案

向表单添加事件侦听器以检测输入是否已更改。

var form = document.getElementById("myForm");

form.addEventListener("input", function (evt) {
    console.log("changed!", evt.target.id);
    // call a function that does the calculations
});
<form id="myForm">
  <input id='a' value="1"><br>
  <input id='b' value="2"><br>
  <input id='c' value="3"><br>
</form>

推荐阅读