title: Javascript to listen to multiple events in DOM
body: <p>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).</p>
  
  <p>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.</p>
  
  <p>Is there a way to change this code to allow the formulas to be recalculated when any of the 5 inputs are changed?</p>
  
  <p>Thanks in advance!</p>
  
  <pre><code>(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);
      });
    });
  })();
  </code></pre>
  
  <p>I updated the code per the suggestions but it's still not working, I replaced</p>
  
  <pre><code>   domAbstractionLayer = loader.getDOMAbstractionLayer(),
     sourceControlInstance = loader.getEngine().getDocument().getElementById(F1R1_CTCH_Sid);
  
  sourceControlInstance.on('value-change', function () {
  
  </code></pre>
  
  <p>with</p>
  
  <pre><code>fields = document.querySelectorAll('#F1R1_CTCH_Sid','#F1R1_H1_Sid');
  console.log(fields);
  for (var field of fields) { 
      fields.addEventListener('change', function(e) {
  </code></pre>
  
  <p>But fields seems to be empty, this is what the console.log shows:</p>
  
  <pre><code>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  
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;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&gt;
  
  &lt;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"&gt;
  </code></pre>