Bug no botão Adicionar

var botaoAdicionar = document.querySelector("#adicionar-paciente"); botaoAdicionar.addEventListener("click", function(event){ event.preventDefault();

var form = document.querySelector("#form-adiciona");

var nome = form.nome.value;
var peso = form.peso.value;
var altura = form.altura.value;
var gordura = form.gordura.value;

var pacienteTr = document.createElement("tr");

var nomeTd = document.createElement("td");
var pesoTd = document.createElement("td");
var alturaTd = document.createElement("td");
var gorduraTd = document.createElement("td");
var imcTd = document.createElement("td");

nomeTd.textContent = nome;
pesoTd.textContent = peso;
alturaTd.textContent = altura;
gorduraTd.textContent = gordura;

pacienteTr.appendChild(nomeTd);
pacienteTr.appendChild(pesoTd);
pacienteTr.appendChild(alturaTd);
pacienteTr.appendChild(gorduraTd);

var tabela = document.querySelector("#tabela-pacientes");

tabela.appendChild(pacienteTr);

});

        <h1 id="titulo-form">Adicionar novo paciente</h1>
        <form id="form-adiciona">
            <div class="grupo-nome">
                <label for="nome">Nome:</label>
                <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo-nome">
            </div>
            <div class="grupo">
                <label for="peso">Peso:</label>
                <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
            </div>
            <div class="grupo">
                <label for="altura">Altura:</label>
                <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
            </div>
            <div class="grupo">
                <label for="gordua">% de Gordura:</label>
                <input id="gordura" name="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
            </div>
            <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
        </form>
    </secti>

    <script src="js/principal.js" ></script>

Olá, Jasson, tudo bem?

Bem, eu testei seu código aqui e ele funcionou normalmente! A única situação onde o paciente não foi adicionado pelo clique do botão foi quando o botão subia um pouco no início do clique, e o cursor não estava em cima do botão ao fim do clique!

De qualquer forma, você pode conferir se a função que adiciona o paciente realmente está sendo chamada quando o botão é clicado. Ou seja, dentro do listener do click do botão, você pode adicionar algo assim:

botaoAdicionar.addEventListener("click", function(event){
    console.log("Botão clicado!");

    // Restante do código...
});

Então você clicará no botão, se não aparecer nada no console, então o problema está na chamada dessa função anônima, mas se aparecer "Botão clicado!" e ainda assim o paciente não for adicionado, então teremos que analisar o código dentro dessa função (mas desconfio que esse não será o caso).

Ainda adicionalmente, você pode adicionar esses dois listeners ao botão:

botaoAdicionar.addEventListener('mousedown', function() {
    console.log('Botão do mouse para baixo no botão!');
})

botaoAdicionar.addEventListener('mouseup', function() {
    console.log('Botão do mouse para cima no botão!');
})

Se o problema persistir, você pode mandar aqui uma imagem do que aparece no console depois de tentar clicar no botão pela primeira vez.

Fico no aguardo!

Fala Antônio, Desde já agradeço por sua ajuda. Ver só depois que eu clico no botão pela primeira vez, o tobão dar um salto e volta pro mesmo lugar e não adiciona o paciente e nem no console aparece a mensagem "Botão clicado!", porém se eu der enter, ele adiciona o cliente.

Olá novamente, Jasson!

Ok, então vamos fazer mais uma verificação: vamos adicionar dois listeners no próprio body da página e descobrir qual está sendo o target (alvo) do clique do seu mouse. Deveria ser o botão, mas por algum motivo o listener não está funcionando nele.

Você pode adicionar o seguinte código:

var body = document.querySelector('body');

body.addEventListener('click', function (event) {
    console.log("Mouse clicou em: ");
    console.log(event.target);
});

body.addEventListener('mousedown', function (event) {
    console.log("Mouse abaixou em: ");
    console.log(event.target);
});

body.addEventListener('mouseup', function (event) {
    console.log("Mouse subiu em: ");
    console.log(event.target);
});

Na função anônima que fica dentro da função addEventListener, podemos passar um parâmetro (nesse caso chamamos de event), que guarda algumas informações do evento que foi escutado. Esse parâmetro possui a propriedade target, que indica o elemento em que clicamos!

Então, ao clicar no botão, o resultado esperado no console deveria ser algo assim:

No seu caso, já que o botão não está escutando o evento do clique, vamos pelo menos descobrir qual está sendo o alvo do clique! E se é isso que está nos atrapalhando. Se no seu console aparecer algo diferente, você pode postar aqui.

Fico no aguardo!