Bug estranho em FOR

[PetrusHenrique 5]

var abrirAgenda = document.getElementsByClassName('ver-mais-agenda');
for (var i = 0; i < abrirAgenda.length; i++){
        var detalhesAgenda = document.getElementsByClassName('detalhesAgenda')[i];
        var postAgenda = document.getElementsByClassName('post-agenda')[i];
        var buttomPlus = document.getElementsByClassName('fa-plus')[i];
        abrirAgenda[i].onclick = function() {
            alert(detalhesAgenda.textContent);  
            return false;
        }  
    }

Gente, por algum motivo esse alert só está retornando a posição 4 do vetor detalhesAgenda, em qualquer abrirAgenda que eu clicar. Já fiz outros scripts com essa lógica e funcionou normalmente, só esse que tá dando bug feioso.

Alguém pode me ajudar?

[Visitante]

Pode mostrar a lista de onde você pega essa 'agenda'?

[Visitante]

Pode mostrar a lista de onde você pega essa agenda?

[am designer 7]

Isso acontece porque o laço for cria um escopo onde a variavel contadora fica encapsulada. Neste caso a var i. Com isso, quando você cria uma outra função, no caso a função do click, a variavel i vem para esse novo escopo com o seu ultimo valor, que seria a quantidade igual ao abrirAgenda.length. Garanto que você tem 4 elementos com name="ver-mais-agenda" rsrsrs.

Tenta isso aqui:

var abrirAgenda = document.getElementsByClassName('ver-mais-agenda');
funcParaClick(i){
  var detalhesAgenda = document.getElementsByClassName('detalhesAgenda')[i];
  var postAgenda     = document.getElementsByClassName('post-agenda')[i];
  var buttomPlus     = document.getElementsByClassName('fa-plus')[i];
  abrirAgenda[i].onclick = function() {
      alert(detalhesAgenda.textContent);  
      return false;
  }  
}
for (var i = 0; i < abrirAgenda.length; i++){
    funcParaClick(i)
}

[PetrusHenrique 5]

Isso acontece porque o laço for cria um escopo onde a variavel contadora fica encapsulada. Neste caso a var i. Com isso, quando você cria uma outra função, no caso a função do click, a variavel i vem para esse novo escopo com o seu ultimo valor, que seria a quantidade igual ao abrirAgenda.length. Garanto que você tem 4 elementos com name="ver-mais-agenda" rsrsrs.

Tenta isso aqui:

var abrirAgenda = document.getElementsByClassName('ver-mais-agenda');
funcParaClick(i){
  var detalhesAgenda = document.getElementsByClassName('detalhesAgenda')[i];
  var postAgenda     = document.getElementsByClassName('post-agenda')[i];
  var buttomPlus     = document.getElementsByClassName('fa-plus')[i];
  abrirAgenda[i].onclick = function() {
      alert(detalhesAgenda.textContent);  
      return false;
  }  
}
for (var i = 0; i < abrirAgenda.length; i++){
    funcParaClick(i)
}

Eu tinha feito esse tópico na comunidade dos assinantes da Alura, que faço parte. A pessoa que me respondeu deu uma explicação e uma solução, mas eu não entendi. Entretanto esta explicação sua ficou mais clara do ponto de vista lógico para mim que sou iniciante.

Eu tenho 5 elementos, fica com 4 por que o primeiro índice é 0. Mas valeu a tentativa :P

Obrigado pela ajuda!

[am designer 7]

hahahaha pode crer, ele retorna o índice.

Fico feliz com a resposta. Eu tento ajudar ao máximo a galera que esta iniciando, não sou um sênior, mas ja passei por muitos problemas, ai as vezes dou um pulo aqui no fórum pra ver se posso ajudar em algo.

Eu escrevi um artigo no tableless sobre conceitos básicos de escopo no javascript, da uma lida la: http://tableless.com.br/uma-visao-detalhada-sobre-instanciacao-de-variaveis-no-javascript/

flw!