数据索引NodeList.Foreach JavaScript

如何解决数据索引NodeList.Foreach JavaScript

我正在尝试根据我的数据索引提供for或foreach，以便为每个adesaoTest字段添加值

我需要获取第二个索引值才能进行计算

JavaScript

function calculaAdesao() {

adesao = 0.00;

const totalAdesao = document.querySelectorAll('.quota-row');

totalAdesao.forEach(adesaoTest => {
    
    var index = adesaoTest.getAttribute('data-index');

    var enTrada = document.getElementById(`quota-enTrada-${index}`);
    var parcelas = document.getElementById(`quota-parcelas-${index}`);
    var adesaoTest = document.getElementById(`quota-adesao-${index}`);

        adesao = parseFloat(enTrada.value) / parcelas.value;
        adesaoTest.value = adesao;
    
})

}

第一次运行代码，可以正常编译 与第一个索引 等于0。

在生成第一个计算后，我立即根据下面的代码生成下一个元素

function addQuotaHtml() {
    var quotasDiv = document.getElementById('quotas');

const id = quotasDiv.querySelectorAll('.row').length + 1;
var quotaPrincipal = document.getElementById('quota-principal');

const request = new Request('/configuracoes/listFormaPagamento/json',{ method: 'POST' });
fetch(request)
    .then(res => {
        res.json()
            .then(data => {

                var html = `<div class="row quota-row" data-index="${id}">

            <div class="col-8" id="quota-${id}" >

                <div>
                    <div class="col-xs-2">
                    <span>EnTrada ${(id + 1)}</span>
                        <input onblur="calculaRestante(this)" type="text" data-index="${id}" id="quota-enTrada-${id}" required="" name="enTrada[]" placeholder="Primeira Parte" id="valor8" value="0"> 
                    </div>

                    <div class="col-xs-2 dateInput">
                        <span>Forma de Pagamento</span>
                        <select onchange="onChangeFormaPagamento(this)" data-index="${id}" id="quota-forma-pagamento-${id}" name="forma_pagamento[]">

                            <option value="">Selecione a forma de pagamento</option> 
                            
                            ${data.map(forma_pagamento => {
                    return `<option value="${forma_pagamento.id_formas_pagamento}"> ${forma_pagamento.forma_pagamento} </option>`
                })}

                        </select>
                    </div>

                    <div class="col-xs-1 dateInput">
                        <span>Parcelas</span>
                        <select data-index="${id}" id="quota-parcelas-${id}"  onchange="calculaAdesao()" name="parcelas[]" >
                                <option value=""></option>
                        </select>
                    </div>
                    
                    <div class="col-xs-2">
                        <span>Vencimento</span>
                        
                        <input data-index="${id}" type="date" required="" id="quota-vencimento-${id}" name="vencimento[]" placeholder="EnTrada">
                        
                    </div>   
                    <div class="col-xs-2">
                        <span>Adesão</span>
                        <input data-index="${id}" type="text" required="" id="quota-adesao-${id} "name="adesao[]" placeholder="Valor de enTrada" id="valor6">
                    </div>


                    <div class="col-xs-2">
                        <span style="color: red; cursor: pointer; margin-top: 3rem" onclick="deleteQuotaHtml(this)"><i class="fas fa-trash-alt"></i></span>
                    <div>
                </div>
            </div>
            </div>`;

                quotasDiv.innerHTML += html;


            })
    })

但是第二次数据索引= 1时，它不会计算 调试器选择adesaoTest变量后，其值为NULL

经过此过程后，它立即变为空

对于每个字段var adesaoTest = document.getElementById(quota-adesao-${index}) 必须在上面进行计算

注意： 我正在使用访存来添加要通过for或foreach的新条目

创建第二个元素时，它将在控制台中显示以下错误

控制台错误

调试器错误

解决方法

谢谢大家，使用以下代码解决问题

JavaScript

function calculaAdesao() {
    
    const totalAdesao = document.querySelectorAll('.quota-row');
    
    totalAdesao.forEach(entrada => {
    adesao = 0.00;
      
      var index = entrada.getAttribute('data-index');
      var entrada = document.getElementById(`quota-entrada-${index}`);
      var parcelas = document.getElementById(`quota-parcelas-${index}`);
      let adesaoFinal = document.getElementById(`quota-adesao-${index}`);
      adesao = parseFloat(entrada.value) / parcelas.value;
      adesaoFinal.value = isNaN(adesao) ? "" : adesao;

    })
    
  }