Please, I’m going insane. I am currently doing a Database project with PostGreSQL using Python Flask for the backend and HTML/CSS/Javascript for the frontend. But on one of the pages where it’s supposed to have two button to create reports, one of them doesn’t work, and it gives the following error message in “Inspect Element” when I click it:
Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘value’)
at fetchProdutoVendidoReport (script.js:50:61)
at HTMLButtonElement.onclick
And whenever I try to fix this, like giving “id”s to the HTML form, the other button/request in the same page fails, and both of them give 500: Internal Server Error.
Can anyone help me? This is the body of the HTML of the aforementioned page (I am Brazilian, so many of the things are in Portuguese, but I hope it isn’t too hard to decipher the problem):
<body>
<div id="header"></div>
<script src="/frontend/components/header/header.js"></script>
<h1>Gerar Relatórios</h1>
<!-- Formulário para Relatório de Pedido Cliente -->
<h2>Relatório de Pedido Cliente</h2>
<form id="pedidoClienteForm">
<label>Categoria: <input type="text" id="categoria" name="categoria"></label><br>
<label>Data Mínima: <input type="date" id="startDate" name="data_min"></label><br>
<label>Data Máxima: <input type="date" id="endDate" name="data_max"></label><br>
<label>Fabricante: <input type="text" id="marca" name="fabricante"></label><br>
<label>Método de Pagamento: <input type="text" id="metodoPagamento" name="metodo"></label><br>
<label>Preço Mínimo: <input type="number" id="precoMin" name="preco_min"></label><br>
<label>Preço Máximo: <input type="number" id="precoMax" name="preco_max"></label><br>
<button type="button" onclick="fetchPedidoClienteReport()">Gerar Relatório de Pedido Cliente</button>
</form>
<div id="pedidoClienteResultado"></div>
<h2>Resultados</h2>
<table id="TabelaPedidoCliente">
<thead>
<tr>
<th>Produto</th>
<th>Categoria</th>
<th>Marca</th>
<th>Total Vendido</th>
<th>Receita Total</th>
<th>Método de Pagamento</th>
<th>Data de Venda</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- Formulário para Relatório de Produto Vendido -->
<h2>Relatório de Produto Vendido</h2>
<form id="produtoVendidoForm">
<label>Data Mínima: <input type="date" name="data_min"></label><br>
<label>Data Máxima: <input type="date" name="data_max"></label><br>
<label>Preço Mínimo: <input type="number" name="preco_min"></label><br>
<label>Preço Máximo: <input type="number" name="preco_max"></label><br>
<button type="button" onclick="fetchProdutoVendidoReport()">Gerar Relatório de Produto Vendido</button>
</form>
<div id="produtoVendidoResultado"></div>
<h2>Resultados</h2>
<table id="TabelaProdutoVendido">
<thead>
<tr>
<th>Produto</th>
<th>Faixa de Preço</th>
<th>Total Vendido</th>
<th>Receita Total</th>
<th>Método de Pagamento</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="/frontend/pages/relatorios/script.js"></script>
</body>
And this is the JS:
async function fetchPedidoClienteReport() {
const startDate = document.getElementById('startDate').value;
const endDate = document.getElementById('endDate').value;
const categoria = document.getElementById('categoria').value;
const marca = document.getElementById('marca').value;
const precoMin = document.getElementById('precoMin').value;
const precoMax = document.getElementById('precoMax').value;
const metodoPagamento = document.getElementById('metodoPagamento').value;
const url = `http://127.0.0.1:8000/relatorio/pedido_cliente?categoria=${categoria}&data_min=${startDate}&data_max=${endDate}&fabricante=${marca}&metodo=${metodoPagamento}&preco_min=${precoMin}&preco_max=${precoMax}`;
try {
// Envia a requisição para o backend
const response = await fetch(url, {
method: 'GET'
});
// Converte a resposta para JSON
const data = await response.json();
// Atualiza a tabela com os dados recebidos
const tbody = document.getElementById('TabelaPedidoCliente').getElementsByTagName('tbody')[0];
// Limpa a tabela antes de preencher com os novos dados
tbody.innerHTML = '';
function formataData(dateString) {
const date = new Date(dateString);
return date.toLocaleDateString('pt-BR'); // Formato 'DD/MM/YYYY'
}
// Preenche a tabela com os dados do relatório
data.forEach(item => {
const row = tbody.insertRow();
row.insertCell(0).textContent = item.nome; // nome do produto
row.insertCell(1).textContent = item.categoria; // categoria do produto
row.insertCell(2).textContent = item.fabricante; // fabricante do produto
row.insertCell(3).textContent = item.quantidade; // total vendido
row.insertCell(4).textContent = item.total_venda; // receita total
row.insertCell(5).textContent = item.metodo; // método de pagamento
row.insertCell(6).textContent = formataData(item.data); // data da venda
})
} catch (error) {
console.error('Erro ao gerar o relatório:', error);
}
}
// Função para buscar o Relatório de Produto Vendido
async function fetchProdutoVendidoReport() {
const DataComeco = document.getElementById('DataComeco').value;
const DataFinal = document.getElementById('DataFinal').value;
const Preco_Min = document.getElementById('preco_Min').value;
const Preco_Max = document.getElementById('preco_Max').value;
const url = `http://127.0.0.1:8000/relatorio/produto_vendido?data_min=${DataComeco}&data_max=${DataFinal}&preco_min=${Preco_Min}&preco_max=${Preco_Max}`;
try {
// Envia a requisição para o backend
const response = await fetch(url, {
method: 'GET'
});
// Converte a resposta para JSON
const data = await response.json();
// Atualiza a tabela com os dados recebidos
const tbody = document.getElementById('TabelaProdutoVendido').getElementsByTagName('tbody')[0];
// Limpa a tabela antes de preencher com os novos dados
tbody.innerHTML = '';
// Preenche a tabela com os dados do relatório
data.forEach(item => {
const row = tbody.insertRow();
row.insertCell(0).textContent = item.nome; // nome do produto
row.insertCell(1).textContent = item.faixa_preco; // categoria do produto
row.insertCell(2).textContent = item.total_vendido; // fabricante do produto
row.insertCell(3).textContent = item.receita_total; // total vendido
row.insertCell(4).textContent = item.metodo; // método de pagamento
})
} catch (error) {
console.error('Erro ao gerar o relatório:', error);
}
}
