拜托，我要疯了。我目前正在使用 PostGreSQL 做一个数据库项目，使用 Python Flask 作为后端，使用 HTML/CSS/Javascript 作为前端。但是在应该有两个按钮来创建报告的页面之一上，其中一个不起作用，当我单击它时，它会在“检查元素”中给出以下错误消息：
未捕获（承诺中）类型错误：无法读取 null 的属性（读取“值”） 在 fetchProdutoVendidoReport (script.js:50:61) 在 HTMLButtonElement.onclick
每当我尝试解决此问题时，例如向 HTML 表单提供“id”，同一页面中的其他按钮/请求都会失败，并且两者都会给出 500：内部服务器错误。
有人可以帮助我吗？这是上述页面的 HTML 正文（我是巴西人，所以很多内容都是葡萄牙语，但我希望破译问题不会太难）：
<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>
这是 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);
}
}
在第二个表格中添加缺少的 ID。
<form id="produtoVendidoForm">
<label>Data Mínima: <input type="date" id="DataComeco" name="data_min"></label><br>
<label>Data Máxima: <input type="date" id="DataFinal" name="data_max"></label><br>
<label>Preço Mínimo: <input type="number" id="preco_Min" name="preco_min"></label><br>
<label>Preço Máximo: <input type="number" id="preco_Max" name="preco_max"></label><br>
<button type="button" onclick="fetchProdutoVendidoReport()">Gerar Relatório de Produto Vendido</button>
</form>