1

Estou montando um pequeno sistema que mostra lojas a partir de um modal com conteúdo PHP. Quando o elemento é selecionado na página HTML principal, ele exibe um modal com uma lista de lojas que, caso tenham seu nome clicado, aparece uma indicação no Google Maps ao seu lado.

O problema é: o código e a função funcionam perfeitamente para o primeiro elemento da página principal que é clicado, mas para o segundo e os demais, o script nem roda. Ou seja, quando se clica no elemento para exibir os outros modais, as lojas aparecem, mas os eventos JavaScript não acontecem, somente acontecem no primeiro elemento.

Esse é o código PHP que está dentro do modal em que são exibidas as lojas:

<div class="lojas">
  <div class="informacoes_lojas">
   <?php foreach($lojas as $loja):  ?>
   <div class="loja_individual">
    <h3 id="loja<?php echo $loja['codigo']?>"><?php echo $loja['nome']?></h3>
    <p><?php echo $loja['endereco']?></p>
    <p><?php echo $loja['bairro'] . " | " . $loja['cidade'] . " - " . $loja['estado']?></p>
    <p><?php echo "CEP: " . $loja['cep']?></p>
    <p><?php echo "Tel.: " . $loja['telefone']?></p>
   </div>
    <?php endforeach; ?>
  </div>
</div>

Essa é a função javascript que captura o click no h3 de uma delas e exibe um iframe do Google Maps:

const encontraLoja = e => {
    loja = e.target.id;
    codigoLoja = loja.replace(/[a-z]+/,"");

    switch (codigoLoja){
        case "1":
            $mapaGoogle.src = "https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3655.4571578146847!2d-46.7012032354786!3d-23.62379373465189!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sAv.+Roque+Petroni+Jr%2C+1089+-+Lojas+63C+e+63D+-+Piso+T%C3%A9rreo!5e0!3m2!1spt-BR!2sbr!4v1556975644631!5m2!1spt-BR!2sbr";
        break;
(...)->restante do switch
                       } 
}

const $lojas = document.querySelector(".lojas");
$lojas.addEventListener("click", encontraLoja);

Notem que durante a confecção das lojas todas recebem um ID, que vai depender do código das mesmas. É a partir desse ID que o JavaScript (na função) consegue determinar o mapa e afins.

4
  • Como assim "click no h3"? Você está atribuindo o evento ao elemento .lojas e só há um elemento desse na DOM aparentemente. Seu seletor não deveria ser algo como .lojas h3 se a intenção é deixar o evento nestes elementos?
    – Woss
    Commented 4/05/2019 às 14:39
  • Esse elemento .lojas é o conjunto de lojas, mas cada h3 (de um número de lojas que pode variar) vai possuir o id que será capturado em loja = e.target.id, que terá o código utilizado para o restante da função. Commented 4/05/2019 às 14:43
  • Mas no código da pergunta só há um elemento div.lojas e no seu JavaScript está selecionando justamente ele, pois você usou querySelector('.lojas'). Por favor, faça um Exemplo Mínimo, Completo e Verificável reproduzindo o problema.
    – Woss
    Commented 4/05/2019 às 14:45
  • Considere que essa div com as lojas já está dentro do modal. Eu usei esse seletor porque não tem como eu declarar uma loja diretamente (pelo id) que eu nem sei se existirá no DOM, porque dependerá das lojas que estão no banco de dados. Cada clique em um elemento da página principal pode gerar um modal com lojas com códigos diferentes, então eu busco o click no campo geral de lojas (.lojas) e identifico o id da loja que foi clicado pelo target. Commented 4/05/2019 às 14:48

1 Resposta 1

1

Isso acontece por que você está usando o método querySelector, que só seleciona o primeiro elemento encontrado no DOM com o seletor passado:

const $lojas = document.querySelector(".lojas");

Se você quiser selecionar todos os elementos que tenham o seletor passado, você deve usar o método querySelectorAll:

const $lojas = document.querySelectorAll('.lojas')

A questão é que esse método retorna um objeto NodeList, que não possui o método addEventListener no seu protótipo. Para isso, devemos iterar sobre cada elemento dessa lista e adicionar o listener de evento:

document.querySelectorAll('.lojas').forEach(($loja) =>
  $loja.addEventListener('click', (event) => {
    // Do stuff.
  })
)
2
  • 1
    Muito obrigado cara, me salvou! Commented 4/05/2019 às 15:32
  • Só pra título de curiosidade, outro detalhe muito importante que tive que alterar: quando esse foreach php gera as lojas, precisava identificar para o JS de qual elemento as lojas estavam sendo referenciadas, assim como o mapa não poderia ter um nome genérico, porque todos os elementos teriam a mesma caixa que possui o mapa. Então, utilizar ids e unificar com o código da loja e o código do elemento também auxiliou e agora roda perfeitamente. Commented 5/05/2019 às 0:10

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 .