0

Tenho uma tabela com datas na qual estou montando um botão que adiciona sete dias ao valor presente. Como são várias linhas, a intenção é que cada data tenha o seu próprio botão de adiamento, entretanto não consigo pegar a data atual da linha onde o botão responsável por alterá-la se encontra.

Em síntese, tentei usar filterItem[i] para pegar a data de cada linha, mas não funciona. No código abaixo, deixei apenas a terceira linha seleciona (o que me dá um indicativo de que o laço de repetição não está funcionando):

Onde estou errando?

var filterItem = document.getElementById('table').querySelectorAll('td:nth-child(2)')
var adiarEntrega = document.querySelectorAll('.adiar')

for (var i = 0; i < filterItem.length; i++) {
    var dataAtual = filterItem[i].innerHTML;
    var botao = adiarEntrega[i];
    botao.addEventListener('click', function() {
          
    var datainicial = filterItem[2].innerHTML;
    var dias = parseInt(7);
    var partes = datainicial.split("/");
    var ano = partes[2];
    var mes = partes[1]-1;
    var dia = partes[0];

    datainicial = new Date(ano,mes,dia);
    datafinal = new Date(datainicial);
    datafinal.setDate(datafinal.getDate() + dias);

    var dd = ("0" + datafinal.getDate()).slice(-2);
    var mm = ("0" + (datafinal.getMonth()+1)).slice(-2);
    var y = datafinal.getFullYear();

    var dataformatada = dd + '/' + mm + '/' + y;
    filterItem[2].innerHTML = dataformatada
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table id="table">
  <tr>
  <th>Coluna 1</th>
  <th>Coluna 2</th>
  </tr>
  <tr>
    <td class="adiar">Avançar 7 dias --> </td>
    <td>12/03/2018</td>
  </tr>
  <tr>
    <td class="adiar">Avançar 7 dias --> </td>
    <td>15/06/1962</td>
  </tr>
  <tr>
    <td class="adiar">Avançar 7 dias --> </td>
    <td>23/11/2009</td>
  </tr>
</table>

1 Resposta 1

2

sei que essa reposta poderia ser um comentário, mas eu quis tentar elaborar uma explicação clara do assunto abordado...

O seu caso é um grave problema de escopo por causa do var, ele não mantém o escopo da variável i dentro do for, ou seja, o valor de i fica acessível em todo o escopo do script, o que gera em resultados inesperados. No final do loop, o i vale 3 e isso gera o erro abaixo se tentarmo usar var datainicial = filterItem[i].innerHTML; dentro da função do eventListener:

Uncaught TypeError: filterItem[i] is undefined

E isso é fato, se você fizer um console.log(i) dentro do listener, ele vai sempre mostrar 3, pois o valor de i foi atualizado por causa do i++, então vai gerar o código filterItem[3].innerHTML e filterItem[3] é undefined:

for (var i = 0; i < filterItem.length; i++) {
  var dataAtual = filterItem[i].innerHTML;
  var botao = adiarEntrega[i];
  botao.addEventListener('click', function () {
    console.log(i) // mostra sempre "3"

    // var datainicial = filterItem[i].innerHTML; <- vai lançar um erro
    var datainicial = filterItem[2].innerHTML;
    var dias = parseInt(7);
    var partes = datainicial.split('/');
    var ano = partes[2];
    var mes = partes[1] - 1;
    var dia = partes[0];

    datainicial = new Date(ano, mes, dia);
    datafinal = new Date(datainicial);
    datafinal.setDate(datafinal.getDate() + dias);

    var dd = ('0' + datafinal.getDate()).slice(-2);
    var mm = ('0' + (datafinal.getMonth() + 1)).slice(-2);
    var y = datafinal.getFullYear();

    var dataformatada = dd + '/' + mm + '/' + y;
    filterItem[2].innerHTML = dataformatada;
  });
}

Para resolver isso, usamos a keyword let para garantir que o escopo não vai ser extrapolado, que o valor de i para cada filterItem[i].innerHTML seja o valor correspondente no loop for.

Veja abaixo o código e ainda coloquei um console.log para imprimir o valor do i:

var filterItem = document.getElementById('table').querySelectorAll('td:nth-child(2)')
var adiarEntrega = document.querySelectorAll('.adiar')

//   ↓↓↓ não use "var"
for (let i = 0; i < filterItem.length; i++) {
  var dataAtual = filterItem[i].innerHTML;
  var botao = adiarEntrega[i];
  botao.addEventListener('click', function () {
    console.log(i); // mostra o valor de acordo com o loop
    //                          ↓↓↓ podemos usar o "i" sem problemas agora
    var datainicial = filterItem[i].innerHTML;
    var dias = parseInt(7);
    var partes = datainicial.split('/');
    var ano = partes[2];
    var mes = partes[1] - 1;
    var dia = partes[0];

    datainicial = new Date(ano, mes, dia);
    datafinal = new Date(datainicial);
    datafinal.setDate(datafinal.getDate() + dias);

    var dd = ('0' + datafinal.getDate()).slice(-2);
    var mm = ('0' + (datafinal.getMonth() + 1)).slice(-2);
    var y = datafinal.getFullYear();

    var dataformatada = dd + '/' + mm + '/' + y;
    filterItem[i].innerHTML = dataformatada;
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table id="table">
  <tr>
  <th>Coluna 1</th>
  <th>Coluna 2</th>
  </tr>
  <tr>
    <td class="adiar">Avançar 7 dias --> </td>
    <td>12/03/2018</td>
  </tr>
  <tr>
    <td class="adiar">Avançar 7 dias --> </td>
    <td>15/06/1962</td>
  </tr>
  <tr>
    <td class="adiar">Avançar 7 dias --> </td>
    <td>23/11/2009</td>
  </tr>
</table>

Para saber mais sobre var, let e escopo no JavaScript.

3
  • Que massa, Iglan! Então era só usar let ao invés de var? Muito obrigado pelo retorno e pela clara explicação, meu caro!
    – winiercape
    26/02/2021 às 14:03
  • 1
    Exato! Nao use mais var, apenas let e const para declarar variaveis. 26/02/2021 às 14:17
  • Valeu pela dica! =]
    – winiercape
    26/02/2021 às 14:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .