Dúvida Loop | JavaScript: programando na linguagem da web

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Alex

| 94k xp | 6 posts

Bom dia galera, Primeiramente obrigado pelo curso! Estou tentando colocar em prática os ensinamentos.

Não estou conseguindo fazer isso aqui:

<style type="text/css">
    div {
        display: inline-block;
    }
    .teste {
        background: hsla(155, 70%, 55%, 0.5);
    }
    .teste2 {
        position: fixed;
        display: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: hsla(200, 100%, 65%, 0.5);
        z-index: 1;
    }
</style>

<body>
    <div class="teste">
        <h2>TESTE 01</h2>
    </div>
    <div class="teste">
        <h2>TESTE 02</h2>
    </div>
    <div class="teste2">
        <h2>ALURA 01!</h2>
    </div>
    <div class="teste2">
        <h2>ALURA 02!</h2>
    </div>
    <script>
        var oi = document.querySelectorAll(".teste");
        var ola = document.querySelectorAll(".teste2");

        for (var i = 0; i < oi.length; i++) {
            oi[i].addEventListener('click', function(){
                ola[i].style.display = "block";
            });
        }
    </script>
</body>

Quando troco o "i" pelo número da array, funciona individualmente. Não sei nem se deveria fazer com loop ou se o problema é na lógica mesmo. Alguém poderia me explicar onde estou errando e o que estudar?

3 respostas

por Mario Souto

| 377.3k xp | 735 posts

Alura Scuba Team Instrutor e Desenvolvedor

19/04/2018

Olá alexandre, tudo bom? Eu não entendi bem qual seu objetivo.

A ideia com o código é fazer o que especificamente?

por Alex

| 94k xp | 6 posts

19/04/2018

Editando aqui... Era apenas um teste que estava tentando na época.

Abrir a mensagem ALURA 01 quando clicar no TESTE 01 e ALURA 02 quando clicar no TESTE 02.

A ideia era fazer isso com um evento de click dentro de um loop.

solução!

por Alex

| 94k xp | 6 posts

10/01/2019

Mas nesse código tem um problema de escopo com a variável i do loop.

Uma solução seria fazer um tipo de closure:

var oi = document.querySelectorAll(".teste");
var ola = document.querySelectorAll(".teste2");
for (var i = 0; i < oi.length; i++) {
  function teste(num) {
    oi[num].addEventListener('click', function () {
      ola[num].style.display = "block"
    })
  }
  teste(i)
}

Outra maneira mais simples com ES6, seria apenas trocar a var por let, que assim ganha escopo de bloco:

const oi = document.querySelectorAll(".teste"); 
const ola = document.querySelectorAll(".teste2");
for (let i = 0; i < oi.length; i++) {
  oi[i].addEventListener('click', function () {
    ola[i].style.display = "block";
  });
}