Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Problemas na chamada de função e eventos no JavaScript

Olá pessoal, tudo bem?

Estou fazendo um mini-crud em javascript pra praticar alguns conceitos, até que tem dado certo, mas estou tendo um probleminha.

Seguinte, eu tenho duas páginas, uma para cadastrar produtos e outra que é a lista com os produtos cadastrados.

Na lista de cadastro tenho dois botões o "Cadastrar" e o "Ver produtos".

Na minha função de Cadastar, o produto é cadastrado e vai diretamente para a tela de lista de produtos. Criei outra função que está sendo chamada quando esse botão de "Cadastrar" é clicado:

function seeList() {
    // Exibir apenas a lista de produtos, independentemente do estado atual dos elementos
    $productList.classList.remove("hide");
    $registerProductForm.classList.add("hide");
}
function registerProductinList (){

    event.preventDefault(); // Evitar o comportamento padrão do formulário

    var nameProduct = $nameProduct.value.trim(); 
    var productDesc = $productDescription.value.trim();
    var productPrice = parseFloat($productPrice.value);

    // Verificar se os valores inseridos são válidos
    if (nameProduct && !isNaN(productPrice)) {

        if(productPrice > 0){
            // Cria um objeto com os dados do produto
            var product = {
                name: nameProduct,
                price: productPrice.toFixed(2),
                description : productDesc
            };

            // Recupera os produtos já armazenados no localStorage
            var productList = JSON.parse(localStorage.getItem("products")) || [];

            // Adiciona o novo produto à lista
            productList.push(product);

            // Atualiza os produtos no localStorage
            localStorage.setItem("products", JSON.stringify(productList));

        
            //Mostrando o que foi armazenado no localStorage
            displayProductsFromStorage();


            // Limpa os campos do formulário após o cadastro
            clearLinesInForm();

            // Vai diretamente para a Lista de produtos
            seeList();
        }
        else {
            alert("O preço inválido");  
        }
    } else {
        alert("Por favor, preencha todos os campos corretamente.");
    }

Até aí tudo certo!

Porém, eu criei um botão para "Ver Produtos" que chama a função. Ao ver a página, a função é executada, a página meio que "pisca" mas retorna para o mesmo estado. Como se a minha classe hide não estivesse sendo colocada na minha tela de cadastro e removida da minha tela de lista de produtos.

$seeListProduct.addEventListener("click", function() {
    console.log("Botão 'Ver Produtos' foi clicado!");
    seeList(); // Verifique se a função seeList() está sendo chamada
});

Já pesquisei e não consegui solucionar, alguém poderia me ajudar?

2 respostas
solução!

Olá, como vai?

Pelo que entendi, você está tendo problemas com a exibição correta de suas páginas quando o botão "Ver Produtos" é clicado. A página "pisca" e retorna ao estado anterior, como se a classe "hide" não estivesse sendo aplicada e removida corretamente.

Uma possibilidade é que o evento de clique no botão "Ver Produtos" esteja recarregando a página. Isso pode ocorrer se o botão for um <button> dentro de um <form>, por exemplo. Nesse caso, o comportamento padrão do botão é submeter o formulário, o que recarrega a página. Para evitar isso, você pode usar event.preventDefault() na função que é chamada quando o botão é clicado, assim como você fez na função registerProductinList().

Aqui está um exemplo de como você poderia fazer isso:

$seeListProduct.addEventListener("click", function(event) {
    event.preventDefault(); // Evitar o comportamento padrão do botão
    console.log("Botão 'Ver Produtos' foi clicado!");
    seeList(); // Verifique se a função seeList() está sendo chamada
});

Tente fazer essa alteração e veja se resolve o problema. Lembre-se de que essa é apenas uma sugestão baseada no que você descreveu, e pode não ser a solução perfeita para o seu caso.

Espero ter ajudado e bons estudos!

Resolveu, muito obrigado Sarah!