-1
   docReady(function () {
    var arr = ["usuario/cadastroum"];
    var lis = document.querySelector(".metro").getElementsByTagName("li");

    for (var i = 0; i < lis.length; i++) {
        lis[i].addEventListener("click", () => {
            console.log(i);
            if (arr[i]) {
                apontar(arr[i], false);
            }
        });
    }
   });

No console.log aparece 5 (Pois existem 6 <li>), seja o primeiro, o segundo, o terceiro, etc... Quando eu clicar na primeira <li>, quero que apareça 0 e não 5, porém, sempre aparece 5, pode me ajudar?

2 Respostas 2

3

Trocar var por let até resolve e sim, o uso disso esta correto, mas a questão nesse ponto é que o problema principal é tentar pegar algo que nem "existia mais", quero dizer, no var i quando acessou apontar(arr[i], false); ele pegou o valor conforme a ultima operação do loop, isso poderia ser simplesmente resolvido isolando em uma função e usando o this, por exemplo:

var arr = ["usuario/cadastroum"];
var lis = document.querySelector(".metro").getElementsByTagName("li");

for (var i = 0; i < lis.length; i++) {
    lis[i].addEventListener("click", apontarClick);
}

function apontarClick() {
    apontar(this, false);
}

function apontar(elemento, acao) {
    console.log(elemento, acao);
}
.metro li {
    padding: 15px 5px;
}

.metro li:hover {
    background: #fc0;
}
<ul class="metro">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
</ul>

Dessa forma até isola e facilita possíveis manutenções futuras no código.

Você também poderia usar Event.currentTarget para pegar o elemento associado ao evento, como no exemplo passamos o parâmetro (e) =>

for (var i = 0; i < lis.length; i++) {
    lis[i].addEventListener("click", (e) => apontar(e.currentTarget, false));
}
2

Isso se deve ao problema de escopo do var no seu loop onde tem o for (var i = 0; i < lis.length; i++), leia mais sobre isso.

Mas basicamente o que acontece é que a cada iteração do loop, voce acaba redefinindo o valor do i por causa do problema de escopo.

Acho que simplismente substituindo var por let, resolve seu problema. Ficaria assim seu código:

docReady(function () {
    var arr = ["usuario/cadastroum"];
    var lis = document.querySelector(".metro").getElementsByTagName("li");

    // for (var i = 0; i < lis.length; i++) {
    for (let i = 0; i < lis.length; i++) {
        lis[i].addEventListener("click", () => {
            console.log(i);
            if (arr[i]) {
                apontar(arr[i], false);
            }
        });
    }
   });

Faça os testes e me diga se resolveu.

Saiba mais:

1
  • Cara, não sei como agradecer, muito obrigado! não sabia dessa diferença! +1
    – Froslass
    21/10/2020 às 16:43

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 .