Javascript to listen to multiple events in DOM

Question

first let me apologize for my very basic javascript knowledge here. I'm trying to fiddle my way through adding some javascript to my 123 Form Builder form to make it automatically perform calculations depending on the a single choice selection (with 5 possible choices).

My code below successfully does what I want when the user changes the selection on the single choice input however what I need it to do it run through the calculations within the switch when any one of five different inputs change: F1R1_CTCH_Sid, F1R1_H1_Sid, F1R1_H2_Sid, F1R1_W_Sid, or F1R1_L_Sid.

Is there a way to change this code to allow the formulas to be recalculated when any of the 5 inputs are changed?

Thanks in advance!

(function () {
  window.addEventListener('load', function () {
    var
      F1R1_CTCH_Sid = 62820745,
      /** THE ID  Floor 1: Room 1 Ceiling Type Choice**/
      F1R1_CTidx_Sid = 62912965,
      /** THE ID  Floor 1: Room 1 Ceiling Type Index**/
      F1R1_H1_Sid = 62734621,
      /** THE ID  Floor 1: Room 1 H1**/
      F1R1_H2_Sid = 62878540,
      /** THE ID  Floor 1: Room 1 H2**/
      F1R1_W_Sid = 62734619,
      /** THE ID  Floor 1: Room 1 W**/
      F1R1_L_Sid = 62734620,
      /** THE ID  Floor 1: Room 1 L**/
      F1R1_VOL_Tid = 62734623,
      /** THE ID  Floor 1: Room 1 Air Volume**/
      P3_Sid = 62474010,

      ct = 0,
      domAbstractionLayer = loader.getDOMAbstractionLayer(),
      sourceControlInstance = loader.getEngine().getDocument().getElementById(F1R1_CTCH_Sid);

    sourceControlInstance.on('value-change', function () {
      idx = domAbstractionLayer.getControlValueById(F1R1_CTidx_Sid);
      F1R1_H1 = domAbstractionLayer.getControlValueById(F1R1_H1_Sid);
      F1R1_H2 = domAbstractionLayer.getControlValueById(F1R1_H2_Sid);
      F1R1_W = domAbstractionLayer.getControlValueById(F1R1_W_Sid);
      F1R1_L = domAbstractionLayer.getControlValueById(F1R1_L_Sid);

      switch (idx) {
        case 0:
          /**FLAT**/
          ct = F1R1_H1 * F1R1_W * F1R1_L;
          break;
        case 1:
          /**SHED**/
          ct = ((F1R1_H1 + F1R1_H2) * F1R1_W * F1R1_L) / 2;
          break;
        case 2:
          /**TRAY or COVE**/
          ct = 12456;
          break;
        case 3:
          /**CATHEDRAL**/
          ct = ((F1R1_H1 + F1R1_H2) * F1R1_W * F1R1_L) / 2;
          break;
        case 4:
          /**FLAT VAULT**/
          ct = (F1R1_W * F1R1_H1 - F1R1_H1 * F1R1_H1 + 2 * F1R1_H2 * F1R1_H1 - F1R1_W * F1R1_H2 - F1R1_H2 * F1R1_H2 + F1R1_H2 * F1R1_W) * F1R1_L;
          break;
        default:
          ct = 0
      }
      domAbstractionLayer.setControlValueById(String(F1R1_VOL_Tid), ct);
      domAbstractionLayer.setControlValueById(String(62896388), ct);
    });
  });
})();

I updated the code per the suggestions but it's still not working, I replaced

   domAbstractionLayer = loader.getDOMAbstractionLayer(),
   sourceControlInstance = loader.getEngine().getDocument().getElementById(F1R1_CTCH_Sid);

sourceControlInstance.on('value-change', function () {

with

fields = document.querySelectorAll('#F1R1_CTCH_Sid','#F1R1_H1_Sid');
console.log(fields);
for (var field of fields) { 
    fields.addEventListener('change', function(e) {

But fields seems to be empty, this is what the console.log shows:

NodeList []  
length: 0  
__proto__: NodeList  
length: (...)  
item: ƒ item()  
entries: ƒ entries()  
forEach: ƒ forEach()  
keys: ƒ keys()  
values: ƒ values()  
constructor: ƒ NodeList()  
Symbol(Symbol.toStringTag): "NodeList"  
Symbol(Symbol.iterator): ƒ values()  
get length: ƒ length()  
__proto__: Object  

I thought I'd include the a snip of the HTML for the two controls I'm trying to monitor for changes too just in case that sheds light on the problem:

<div data-role="control" data-type="radio" data-hash="0000003c" data-type-id="18" data-colspan="13" aria-labelledby="checkbox-0000003c-acc radio-0000003c-clearable-button-acc checkbox-0000003c-error-acc checkbox-0000003c-instr-acc" data-is-side-by-side-layout="1" data-renderer-type="tln" data-id="62820745" data-is-active="1" class>

<div data-role="control" data-type="number" data-hash="00000041" data-type-id="13" data-colspan="5" data-renderer-type="tln" data-id="62734621" data-is-active="1">

Answer 1

You'll need to collect all of the elements you want to use in the calculation into a NodeList, then add the event listener to each of them, something like this:

var fields = document.querySelectorAll('#F1R1[*]');

for (var field of fields) {
    field.addEventListener('change', function(e) {...};
}

Answer 2

I finally got it to work - Thanks @R Greenstreet for the push in the right direction!

(function(){

window.addEventListener('load', function(){

var 
F1R1_CTCH_Sid = 62820745, /** THE ID  Floor 1: Room 1 Ceiling Type Choice**/
F1R1_CTidx_Sid = 62912965, /** THE ID  Floor 1: Room 1 Ceiling Type Index**/
F1R1_H1_Sid = 62734621, /** THE ID  Floor 1: Room 1 H1**/
F1R1_H2_Sid = 62878540, /** THE ID  Floor 1: Room 1 H2**/
F1R1_W_Sid = 62734619, /** THE ID  Floor 1: Room 1 W**/
F1R1_L_Sid = 62734620, /** THE ID  Floor 1: Room 1 L**/
F1R1_VOL_Tid = 62734623, /** THE ID  Floor 1: Room 1 Air Volume**/
P3_Sid = 62474010,

ct = 0,

domAbstractionLayer = loader.getDOMAbstractionLayer()

fields = document.querySelectorAll('div[data-id="62912965"],div[data-id="62820745"], div[data-id="62734621"], div[data-id="62878540"], div[data-id="62734619"], div[data-id="62734620"]');

for (var field of fields) { 
    field.addEventListener('change', function() {

  idx = domAbstractionLayer.getControlValueById(F1R1_CTidx_Sid);
  F1R1_H1 = domAbstractionLayer.getControlValueById(F1R1_H1_Sid);
  F1R1_H2 = domAbstractionLayer.getControlValueById(F1R1_H2_Sid);
  F1R1_W = domAbstractionLayer.getControlValueById(F1R1_W_Sid);
  F1R1_L = domAbstractionLayer.getControlValueById(F1R1_L_Sid);

  switch (idx) {
  case 0: /**FLAT**/
    ct = F1R1_H1*F1R1_W*F1R1_L;
    break;
  case 1: /**SHED**/
    ct = ((F1R1_H1+F1R1_H2)*F1R1_W*F1R1_L)/2;
    break;
  case 2: /**TRAY or COVE**/
    ct = 12456;
    break;
  case 3: /**CATHEDRAL**/
    ct = ((F1R1_H1+F1R1_H2)*F1R1_W*F1R1_L)/2;
    break;
  case 4: /**FLAT VAULT**/
    ct = (F1R1_W*F1R1_H1-F1R1_H1*F1R1_H1+2*F1R1_H2*F1R1_H1-F1R1_W*F1R1_H2-F1R1_H2*F1R1_H2+F1R1_H2*F1R1_W)*F1R1_L;

    break;
  default:
    ct = 0

}


domAbstractionLayer.setControlValueById(String(F1R1_VOL_Tid),ct);
domAbstractionLayer.setControlValueById(String(62896388),ct);


});


};

})})();