Executando verificação de segurança...
1

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:

    // 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.

    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?

Carregando publicação patrocinada...