Boa noite, Não estou conseguindo resolver o seguinte erro: principaConsultaProdutos.js:38 Uncaught TypeError: Cannot read property 'appendChild' of null at HTMLButtonElement. (principaConsultaProdutos.js:38) Eu consigo criar uma tr que equivale a um paciente mas não incluir o paciente.
var marcas = document.querySelector("#primeira-marca");
var tdMarca = marcas.querySelector(".info-nomedamarca");
var nome = tdMarca.textContent;
var tdLinha = marcas.querySelector(".info-linha")
var linha = tdLinha.textContent;
var botaoAdicionar =document.querySelector("#adicionar-medicamento");
botaoAdicionar.addEventListener("click", function(event){
event.preventDefault();
var form = document.querySelector("#form-adiciona");
var medicamento = form.medicamento.value;
var linhas = form.linhas.value;
var representantes = form.representantes.value;
var produtoTr = document.createElement("tr");
var nomedamarcaTd = document.createElement("td");
var linhaTd = document.createElement("td");
var repTd = document.createElement("td");
nomedamarcaTd.textContent = medicamento;
linhaTd.textContent = linhas;
repTd.textContent = representantes;
produtoTr.appendChild(nomedamarcaTd);
produtoTr.appendChild(linhaTd);
produtoTr.appendChild(repTd);
var tabela = document.querySelector("#tabela-marcas");
tabela.appendChild(produtoTr);
});<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Consulta marcas por linha</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styleConsultaProdutos.css">
</head>
<body class="container">
<header>
<div class="container">
<h3 class="titulo">Consulta marcas</h3>
</div>
</header>
<main class="container">
<label for="filtrar-tabela">Filtre:</label>
<input type="text" name="filtro" id="filtrar-tabela" placeholder="Digite a marca">
<table class="table-hover">
<thead>
<tr>
<th>Marca</th>
<th>Linha</th>
<th>Representantes</th>
</tr>
</thead>
<tbody class="tabela-marcas">
<tr class="produto" id="primeira-marca">
<td class="info-nomedamarca">Adipet</td>
<td class="info-linha">Conquista</td>
<td class="info-rep">
Wilson (27 99255-1740)<br>
Karina (27 99255-2856)<br>
Rodrigo (27 99255-7888)<br>
Rogéria (27 99999-9999)<br>
Raphael (27 2222-2222)</td>
</tr>
<tr class="produto">
<td>Foxis</td>
<td>Conquista</td>
<td>Wilson</td>
</tr>
</tbody>
</table>
</main>
<section class="container">
<h2 id="titulo-form">Adicionar novo Medicamento</h2>
<form id="form-adiciona">
<div class="grupo">
<label for="medicamento">Marca:</label>
<input id="medicamento" name="medicamento" type="text" placeholder="digite o nome do medicamento" class="campo">
</div>
<div class="grupo">
<label for="linhas">Linha:</label>
<input id="linhas" name="linhas" type="text" placeholder="digite o nome da linha" class="campo campo-medio">
</div>
<div class="grupo">
<label for="representantes">Representante:</label>
<input id="representantes" name="Representantes" type="text" placeholder="digite o nome do representante e o contato" class="campo campo-medio">
</div>
<button id="adicionar-medicamento" class="botao bto-principal">Adicionar</button>
</form>
</section>
<script src="principaConsultaProdutos.js"></script>
</body>
</html>
