数据索引 NodeList.Foreach JavaScript

Question

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

我需要获取第二个索引值来做计算

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;


            })
    })

但是第二次当data-index = 1时它不计算并且调试器一拿起adesaoTest变量，值都是NULL

经过这个过程之后它就变成了空值

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

注意：我正在使用 fetch 添加将通过 for 或 foreach

的新条目

创建第二个元素时，它在控制台中出现以下错误

控制台错误

调试器错误

Answer 1

谢谢大佬，请用下面的代码解决问题

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;

    })
    
  }

数据索引 NodeList.Foreach JavaScript

data-index NodeList.Foreach JavaScript

javascript

arrays

nodelist