![](/img/trans.png)
[英]JavaScript - Listen for multiple events in a specified period of time
[英]Javascript to listen to multiple events in DOM
首先让我为我非常基本的 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">
您需要将要在计算中使用的所有元素收集到一个 NodeList 中,然后为每个元素添加事件侦听器,如下所示:
var fields = document.querySelectorAll('#F1R1[*]');
for (var field of fields) {
field.addEventListener('change', function(e) {...};
}
我终于让它工作了——感谢@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);
});
};
})})();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.