Question

我正在尝试为我的表单制作一个迷你计算器。我的html表单基于数据原型，因此它使用2个输入呈现无限量的表单：日期和持续时间。此输入使用ID-s呈现，如loan_charge_0_date，loan_charge_1_duration;下一个：loan_charge_1_date，loan_charge_1_duration`等等。

我已经编写了一个代码，使用正则表达式创建一个包含所有ids日期的数组，以及另一个包含所有ids个持续时间的数组。因此，当我点击添加新表单的+按钮时，我的dateIdsArray = [loan_charge_0_date]和durationIdArray = [loan_charge_0_duration]。当我再次点击它时，它又向每个数组推送了一个元素，loan_charge_1_date in dateIdsArray和loan_charge_1_duration到durationIdsArray`。

现在，我需要每对（表单）绑定一个带有2个参数的函数，如date.value和duration.value ...并在此函数中生成endingDateCalculator。

按照这个顺序，我做了一些简单的陈述，首先......连接这2个数组，然后将它们作为一对......所以，结果数组是一个二维数组：

pairValuesArray = [
[loan_charge_0_date, loan_charge_0_duration],
[loan_charge_1_date, loan_charge_1_duration],
[loan_charge_2_date, loan_charge_2_duration]
];

如何将函数附加到每一对，所以当我onkeyup输入的持续时间时，它将使用2个参数调用endingDateCalculator函数（this.date，this.duration）和进行计算？

我试过像：

pairArray.forEach( x => document.getElementById(x).setAttribute('onkeyup', 'endingDateCalculator(this.value, this.value);'));

但它告诉我...无法将setAttribute运行为null：/

我的整个脚本在这里：

<script>
var bodyText =  document.getElementsByClassName('panel-group')[0].innerHTML;
var durationIds = bodyText.match(/id="(.*duration)"/g);
var durationIdArray = durationIds.map(y => y = y.split('\"')[1]);

var dateIds = bodyText.match(/id="(.*date)"/g);
var dateIdArray = dateIds.map(x => x = x.split('\"')[1]);

var concatArray = new Array();

for (var i = 0; i < durationIds.length; i++) {
    concatArray.push(dateIdArray[i]);
    concatArray.push(durationIdArray[i]);
}

var pairArray = new Array ();

var i,j,temparray,chunk = 2;
for (i=0,j=concatArray.length; i<j; i+=chunk) {
    temparray = concatArray.slice(i,i+chunk);
    pairArray.push(temparray);    
}

console.debug(pairArray);
pairArray.forEach( x => document.getElementById(x).setAttribute('onkeyup', 'endingDateCalculator(this.value, this.value);'));
//dateIdArray.forEach( x => document.getElementById(x).setAttribute('onkeyup', 'endingDateCalculator(this.value);'));

function endingDateCalculator(valueOfDate, valueOfDuration) {
    alert(valueOfDate + valueOfDuration);
}

</script>

JS - setAttribute（具有2个参数的函数）到二维数组

0 个答案: