-3

Estou fazendo um projeto de um site de produtos, onde há várias seções para os tipos vendidos (todos os produtos, roupas, calçados, etc). Criei links para essas seções. Usando addEventListener, quando clico no link aparecem os produtos de cada seção em uma vitrine em forma de lista. Porém, não sei como fazer para que o link Todos os Produtos já inicie selecionado, pois no momento quando inicio o site a vitrine está vazia.

Obs.: Devo iniciar o site com todos os produtos na vitrine e o link Todos os Produtos selecionado, como se iniciasse a página com esse evento ativo, já procurei muito se existe essa possibilidade mas não achei, espero que tenha dado para entender. Abaixo o código do evento ao clicar no link de Todos os produtos:

todosOsProdutos.addEventListener("click",function ()
    {
        ul.innerHTML = ""
        produtos.forEach ( 
            function (produto) {
            ul.append(cardProduto(produto))
            }
        )
        somaDosProdutos(produtos)
    }
)

Mais um obs.: cardProduto é uma função que vai atribuir ao objeto selecionado a estilização do produto a venda que deve aparecer no site. somaDosProdutos é uma função que faz a soma de todos os produtos passados na função e adiciona em uma parte especifica do site. Me desculpa se estou detalhando muito, nem sei se é relevante mas é que é minha primeira vez perguntando no site.

1 Resposta 1

1

Dê um nome para a função que usa como listener, e acrescente outro listener que verifica se a estrutura página já foi carregada, chamando a mesma função.

Assim:

function populaListaDeProdutos() {
    ul.innerHTML = ""
    produtos.forEach ( 
        function (produto) {
        ul.append(cardProduto(produto))
        }
    )
    somaDosProdutos(produtos)
}

todosOsProdutos.addEventListener("click", populaListaDeProdutos, false);
window.addEventListener("DOMContentLoaded", populaListaDeProdutos, false);
1
  • Deu certo, muito obrigada, estou aprendendo a usar o DOM agora e não conheço muito das possibilidades de interagir com a janela do browser.
    – Cris
    1/06/2022 às 14:15

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 .