代码之家 › 专栏 › 技术社区 › user1563247

用javascript中的onchange事件更新多个变量

html javascript

user1563247 · 技术社区 · 4 年前

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

3 回复 | 直到 4 年前

Jamiec 4 年前

将所有计算都封装在一个函数中( recalc 并在页面加载时调用它一次,但也可以从事件侦听器中调用它 input 元素

parseFloat

function calcOne(a,b,c){
return a+b+c
}
function calcTwo(c,d){
return c*d
}
function calcThree(d,e){
return d+e
}
document.querySelectorAll("input").forEach(x => x.addEventListener("change",recalc));

function 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()

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

epascarello 4 年前

将事件侦听器添加到窗体以检测是否更改了输入。

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>

Paul 4 年前

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;
    });
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

5 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

5 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

5 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

5 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前