update multiple variables with onchange event in vanilla javascript

Question

I have a series of functions that take in several inputs and generate several outputs. When any input changes all the outputs should change as well. The javascript is as follows:

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;

So, when any of inputs a, b, or c change, then results in d, e, and f will change.

The corresponding html is:

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

How do I add an event listener such that any change to the form inputs a,b,c causes the displayed results d, e, and f to be updated? Note, that in my actual code (not the example above) there are about 50 variables and 50 functions, but all are very computationally lite (not much more than shown above) if that matters.

Great answer by @epascarello below. If you don't want to follow that route, you can always wrap functions in function as described here -> stackoverflow.com/questions/50742349/… — mutantkeyboard
– mutantkeyboard, Commented Feb 15, 2021 at 14:24

epascarello · Accepted Answer · 2021-02-15 14:22:39Z

3

Add an event listener to the form to detect the input was altered.

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>

answered Feb 15, 2021 at 14:22

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ThisClark Over a year ago

This is good. It catches every key stroke.

Jamiec · Accepted Answer · 2021-02-15 14:26:14Z

Wrap all your calculations in a function (recalc below) and call it once when the page loads, but also call it from an event listener for all the input elements

note also, that you don;t need to call parseFloat on the results of your functions - theyre already numeric.

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>

Paul · Accepted Answer · 2021-02-15 14:28:49Z

0

you can use an index since you have as many input as result para, with a input & result class:

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

answered Feb 15, 2021 at 14:28

Paul

116 bronze badges

Collectives™ on Stack Overflow

update multiple variables with onchange event in vanilla javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related