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

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

javascript html

在vanilla javascript中使用onchange事件更新多个变量,javascript,html,Javascript,Html,我有一系列的函数，它们接收多个输入并生成多个输出。当任何输入改变时，所有输出也应该改变。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(

我有一系列的函数，它们接收多个输入并生成多个输出。当任何输入改变时，所有输出也应该改变。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个函数，但如果这很重要的话，它们在计算上都非常精简（不比上面显示的多）。

在表单中添加一个事件侦听器，以检测输入是否被更改

var form=document.getElementById（“myForm”）；
表单.addEventListener（“输入”，函数（evt）{
log（“changed！”，evt.target.id）；
//调用执行计算的函数
});







在表单中添加事件侦听器，以检测输入是否被更改

var form=document.getElementById（“myForm”）；
表单.addEventListener（“输入”，函数（evt）{
log（“changed！”，evt.target.id）；
//调用执行计算的函数
});







将所有计算包装在一个函数中（recalc
如下），并在页面加载时调用一次，但也可以从事件侦听器中调用所有输入
元素
还要注意的是，你没有；不需要对函数的结果调用parseFloat
——它们已经是数字了

函数calcOne（a、b、c）{
返回a+b+c
}
函数calcTwo（c，d）{
返回c*d
}
函数计算三（d，e）{
返回d+e
}
document.queryselectoral（“input”）.forEach（x=>x.addEventListener（“change”，recalc））；
函数recalc（）{
var a=parseFloat（document.getElementById（'a'）.value）；
var b=parseFloat（document.getElementById（'b'）.value）；
var c=parseFloat（document.getElementById（'c'）.value）；
var d=calcOne（a、b、c）；
var e=calcTwo（c，d）；
var f=calcThree（d，e）；
document.getElementById（“result_d”）.innerHTML=d；
document.getElementById（“result_e”）.innerHTML=e；
document.getElementById（“result_f”）.innerHTML=f；
}
recalc（）









将您的所有计算打包到一个函数中（recalc
），并在页面加载时调用它一次，但也可以从事件侦听器中调用所有输入
元素
还要注意的是，你没有；不需要对函数的结果调用parseFloat
——它们已经是数字了

函数calcOne（a、b、c）{
返回a+b+c
}
函数calcTwo（c，d）{
返回c*d
}
函数计算三（d，e）{
返回d+e
}
document.queryselectoral（“input”）.forEach（x=>x.addEventListener（“change”，recalc））；
函数recalc（）{
var a=parseFloat（document.getElementById（'a'）.value）；
var b=parseFloat（document.getElementById（'b'）.value）；
var c=parseFloat（document.getElementById（'c'）.value）；
var d=calcOne（a、b、c）；
var e=calcTwo（c，d）；
var f=calcThree（d，e）；
document.getElementById（“result_d”）.innerHTML=d；
document.getElementById（“result_e”）.innerHTML=e；
document.getElementById（“result_f”）.innerHTML=f；
}
recalc（）









您可以使用索引，因为您有与result para一样多的输入，具有输入和结果类：
let inputs = document.getElementsByClassName('input');
let results = document.getElementByClassName('result');

for(let i = 0; i < inputs.length; i++){
    input[i].addEventListener('keydown', () => {
        result[i] = do_some_suff;
    });
}

let inputs=document.getElementsByClassName（'input'）；
让results=document.getElementByClassName（'result'）；
for（设i=0；i{
结果[i]=做一些试验；
});
}
您可以使用索引，因为您有与结果段落一样多的输入，具有输入和结果类：
let inputs = document.getElementsByClassName('input');
let results = document.getElementByClassName('result');

for(let i = 0; i < inputs.length; i++){
    input[i].addEventListener('keydown', () => {
        result[i] = do_some_suff;
    });
}

let inputs=document.getElementsByClassName（'input'）；
让results=document.getElementByClassName（'result'）；
for（设i=0；i{
结果[i]=做一些试验；
});
}
下面@epascarello的回答很好。如果您不想遵循这条路线，您可以始终按照下面的@epascarello所述将函数包装到函数中->下面的@epascarello给出了一个很好的答案。如果您不想遵循该路线，您可以始终按照此处所述在函数中包装函数->这很好。它抓住了每一个关键点，这很好。它抓住了每一个关键点。