使用JavaScript onChange函数更改字段值

我正在尝试更改

配额adesao

值，该值是由

quota parcelas

的值决定的

quota entrada

的值

JavaScript

adesao = 0.00;
entrada = document.getElementById('quota-entrada');
parcelas = document.getElementById('quota-parcelas');
var adesaoResult = document.getElementById('quota-adesao');


const totalAdesao = document.querySelectorAll('.quota-row');
totalAdesao.forEach(entrada => {

    var index = entrada.getAttribute('data-index');
    var entrada = document.getElementById(`quota-entrada-${index}`);
    var parcelas = document.getElementById(`quota-parcelas-${index}`);
    //parseFloat(entrada);

    adesao = parseFloat(entrada.value) / parcelas;

})

adesaoResult.value = adesao;

HTML

我正在使用onchange进行

quota adesao

计算，插入

quota parcelas

时，将自动填充

quota adesao

恩特拉达1
帕加门托形式酒店
帕加门托形式精选酒店
我用下面的代码解决了计算，但是我仍然需要计算您在索引中看到的其他“配额adesao”。代码仅对索引-0进行计算

function calculaAdesao() {

adesao = 0.00;
//entrada = document.getElementById('quota-entrada');
//parcelas = document.getElementById('quota-parcelas');
var adesaoResult = document.getElementById('quota-adesao');


const totalAdesao = document.querySelectorAll('.quota-row');
totalAdesao.forEach(entrada => {

    var index = entrada.getAttribute('data-index');
    var entrada = document.getElementById(`quota-entrada-${index}`);
    var parcelas = document.getElementById(`quota-parcelas-${index}`);
    var adesaoTest = document.getElementById(`quota-adesao-${index}`);
    //parseFloat(entrada);

    adesao = parseFloat(entrada.value) / parcelas.value;

    adesaoTest.value = adesao;

})

我用下面的代码解决了计算，但是我仍然需要计算您在索引中看到的其他“配额adesao”。代码仅对索引-0进行计算

function calculaAdesao() {

adesao = 0.00;
//entrada = document.getElementById('quota-entrada');
//parcelas = document.getElementById('quota-parcelas');
var adesaoResult = document.getElementById('quota-adesao');


const totalAdesao = document.querySelectorAll('.quota-row');
totalAdesao.forEach(entrada => {

    var index = entrada.getAttribute('data-index');
    var entrada = document.getElementById(`quota-entrada-${index}`);
    var parcelas = document.getElementById(`quota-parcelas-${index}`);
    var adesaoTest = document.getElementById(`quota-adesao-${index}`);
    //parseFloat(entrada);

    adesao = parseFloat(entrada.value) / parcelas.value;

    adesaoTest.value = adesao;

})

由于我不太理解您希望如何实现代码和函数，我做出了以下假设：
首先，我假设用户能够插入多个“Entrada”。然后，您的代码在底部看起来如下所示：


弗斯特
…诱捕
第二
…诱捕

通过这种方式，您可以通过使用
document.querySelectorAll（'.quota principal'）
选择每个entrada循环。这些元素中的每一个都有属性
数据索引
，它为您提供了一个类似
0,1,2
等的数字。使用该数字，您可以获得具有
id
的项目，例如
，这在您提供的代码中是不可能的

现在，您可以在每个
配额主体中正确选择并设置
adesaoTest
元素

下面是完整的工作示例


函数calculaAdesao（）{
阿德索=0.00；
const totalAdesao=document.querySelectorAll（“.quota principal”）；
totalAdesao.forEach（entrada=>{
var index=entrada.getAttribute（'data-index'）；
var entrada=document.getElementById（`quota entrada-${index}`）；
var parcelas=document.getElementById（`quota parcelas-${index}`）；
设adesaoTest=document.getElementById（`quota adesao-${index}`）；
adesao=parseFloat（entrada.value）/parcelas.value；
adesaoTest.value=isNaN（adesao）？“”：adesao；
})
}
函数calculaRestante（l）{}
函数onchangeformapagmento（l）{}

弗斯特
恩特拉达1
帕加门托形式酒店
帕加门托形式精选酒店
卡托
孔方兄
帕尔塞拉斯
0
1.
2.
文西门托
阿德昂
第二
恩特拉达1
帕加门托形式酒店
帕加门托形式精选酒店
卡托
孔方兄
帕尔塞拉斯
0
1.
2.
文西门托
阿德昂
由于我不太理解您想要如何实现代码和功能，我做出了以下假设：
首先，我假设用户能够插入多个“Entrada”。然后，您的代码在底部看起来如下所示：


弗斯特
…诱捕
第二
…诱捕

通过这种方式，您可以通过使用
document.querySelectorAll（'.quota principal'）
选择每个entrada循环。这些元素中的每一个都有属性
数据索引
，它为您提供了一个类似
0,1,2
等的数字。使用该数字，您可以获得具有
id
的项目，例如
，这在您提供的代码中是不可能的

现在，您可以在每个
配额主体中正确选择并设置
adesaoTest
元素

下面是完整的工作示例


函数calculaAdesao（）{
阿德索=0.00；
const totalAdesao=document.querySelectorAll（“.quota principal”）；
totalAdesao.forEach（entrada=>{
var index=entrada.getAttribute（'data-index'）；
var entrada=document.getElementById（`quota entrada-${index}`）；
var parcelas=document.getElementById（`quota parcelas-${index}`）；
设adesaoTest=document.getElementById（`quota adesao-${index}`）；
adesao=parseFloat（entrada.value）/parcelas.value；
adesaoTest.value=isNaN（adesao）？“”：adesao；
})
}
函数calculaRestante（l）{}
函数onchangeformapagmento（l）{}

弗斯特
恩特拉达1
帕加门托形式酒店
帕加门托形式精选酒店
卡托
孔方兄
帕尔塞拉斯
0
1.
2.
文西门托
阿德昂
第二
恩特拉达1
帕加门托形式酒店
帕加门托形式精选酒店
卡托
孔方兄
帕尔塞拉斯
0
1.
2.
文西门托
阿德昂
嗨，欢迎来到SO！你能提供前端部件吗