Javascript 監聽DOM中的多個事件

Question

首先讓我為我非常基本的 javascript 知識道歉。 我試圖通過向我的 123 Form Builder 表單添加一些 javascript 來調整我的方式，使其根據單個選擇（有 5 個可能的選擇）自動執行計算。

當用戶更改單選輸入上的選擇時，我下面的代碼成功地完成了我想要的操作，但是當五個不同輸入中的任何一個發生更改時，我需要它來完成開關內的計算：F1R1_CTCH_Sid、F1R1_H1_Sid、F1R1_H2_Sid、F1R1_W_Sid , 或 F1R1_L_Sid。

有沒有辦法更改此代碼以允許在更改 5 個輸入中的任何一個時重新計算公式？

提前致謝！

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

我根據建議更新了代碼，但仍然無法正常工作，我更換了

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

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

和

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

但是字段似乎是空的，這是 console.log 顯示的內容：

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  

我想我會為我試圖監視更改的兩個控件包含 HTML 的片段，以防萬一闡明問題：

<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

您需要將要在計算中使用的所有元素收集到一個 NodeList 中，然后為每個元素添加事件偵聽器，如下所示：

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

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

Answer 2

我終於讓它工作了——感謝@R Greenstreet 推動了正確的方向！

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


});


};

})})();