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?