Me aparece un error en la consola del desarrollador y no puedo solucionarlo

Hola pablo. como primer error que encontre en tu codigo es la omision de los parentensis en la funcion preventDefault y el punto y coma.

event.preventDefault();

y como segundo error o al menos diferencia con mi HTML es que el id del formulario es form-adicionar y no como lo tienes tu formAdicionar.

Por eso cuando se detiene a leer la variable nombre no puede accerder ya que el formulario esta mal capturado con el querySelector.

Prueba cambair estas cosas a ver si se soluciona. De ser asi, me alegro poder ayudarte y marca la respuesta como solucionada. Gracias y saludos. A seguir programando!!

PD: si el error persiste vuelve a postear aqui abajo y seguiremos buscando.

Hola Cristian, muchas gracias por la respuesta. Ya modifiqué mi event.preventDefault();

En cuanto a al selector de id, en el HTML lo había cambiado por formAdicionar y por eso en el JS lo puse así, ya que el error me lo tiró previamente. Ahora, nuevamente volví a ponerlo con el id form-adicionar y lo copié y pegué exactamente igual, pero me sigue dando el mismo error en la consola de desarrollador en la línea 8 que es la de variable nombre. Debajo pongo el HTML del form y mi parte de JS.

<form id="form-adicionar">
                <div class="grupo">
                    <label for="nombre">Nombre:</label>
                    <input id="nombre" name="nombre" type="text" placeholder="digite el nombre del paciente" class="campo">
                </div>
                <div class="grupo">
                    <label for="peso">Peso:</label>
                    <input id="peso" name="peso" type="text" placeholder="digite el peso del paciente" class="campo campo-medio">
                </div>
                <div class="grupo">
                    <label for="altura">Altura:</label>
                    <input id="altura" name="altura" type="text" placeholder="digite la altura del paciente" class="campo campo-medio">
                </div>
                <div class="grupo">
                    <label for="gordura">% de Gordura:</label>
                    <input id="gordura" type="text" placeholder="digite el porcentaje de gordura del paciente" class="campo campo-medio">
                </div>
                <button id="adicionar-paciente" class="boton bto-principal">Adicionar</button>
            </form>

Aquí dejo el JS:

botonAdicionar.addEventListener("click",function(event){
    event.preventDefault();

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

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

    console.log(nombre);
    console.log(peso);
    console.log(altura);
    console.log(gordura);

    pacienteTr = document.createdElement("tr");
    nombreTd = document.createdElement("td");
    alturaTd = document.createdElement("td");
    pesoTd = document.createdElement("td");
    gorduraTd = document.createdElement("td");
    imcTd = document.createdElement("td");

    nombreTd.textContent = nombre;
    alturaTd.textContent = altura;
    pesoTd.textContent = peso;
    gorduraTd.textContent = gordura;

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

    console.log(pacienteTr);

});

Estoy dando vueltas y no quiero seguir avanzando porque entiendo que el error se seguirá quedando a medida que avanzo. Muchas gracias y perdón nuevamente por las molestias. Saludos. Pablo.-

Hola Pablo. Otro error que se me paso por alto anoche ya que estaba a medio dormir jajajajja es el createElement...... sin d

pacienteTr = document.createElement("tr");

y asi con todos los demas. Revisa ahora si se corrige.... sino seguiremos hasta develar que es. No nos va a ganar un simple codigo jajjajajajaja

Saludos. Si se corrigio no olvides marcar la respuesta como solucionada. A seguir programando!!!!!

Estuve buscando el tipo de error y encontre este dato: Este error es muy comun cuando estas intentando acceder a un elemento que no existe o su valor es undefined.

Te hago una pregunta: el error te lo tira desde el arranque o cuando presionas el boton adicionar?

Buenas tardes. Muchas gracias por la predisposición. Ya he cambiado todos los createElement, le saqué la d. Probé y me sigue dando el mismo error que me informas en tu segundo comentario. Efectivamente abro la consola del desarrollador y no me da ningún error, y cuando presiono el botón adicionar, ahí es cuando me sale el error que puse antes, el siguiente:

principal.js:8 Uncaught TypeError: Cannot read properties of null (reading 'nombre') at HTMLButtonElement. (principal.js:8:23)

Muchas gracias y perdón por haber complicado y tenerte hasta tarde.

Nuevamente muchisimas gracias!

Saludos.

Pablo.-

hola pablo. pues yo nuevamente. jaja. mira otra cosa que no vi en tu codigo js es la captura del boton adicionar pacientes desde html a js. tal vez por eso te tira error cuando presionas el boton.

te faltaria la siguiente linea que seria la linea 1.

var botonAdicionar = document.querySelector("#adicionar-paciente");

a ver ahora. se me van agotando los recursos jaja. a tu disposicion.nos vemos saludos.

Cristian, buenas tardes. Si, muchas gracias por todo. Esa variable ya la tenía creada, no la copie en el código que transcribí arriba, y el error sigue persistiendo. Volví a chequearlo con el código que se hace en el video (lo hago a medida que voy viéndolo) y lo tengo exactamente igual. Seguiré intentándolo a ver por qué sigue así. Gracias!

Hola Pablo. Me di por vencido. Copie el codigo en el VSC corregi las cositas que te habia comentado y me funciono. Aca te dejo el codigo de prueba para que lo compares y analices caracter por caracter porque la omision de una letra o letra demas, punto y coma tec. te causa error.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form id="form-adicionar">
        <div class="grupo">
            <label for="nombre">Nombre:</label>
            <input id="nombre" name="nombre" type="text" placeholder="digite el nombre del paciente" class="campo">
        </div>
        <div class="grupo">
            <label for="peso">Peso:</label>
            <input id="peso" name="peso" type="text" placeholder="digite el peso del paciente" class="campo campo-medio">
        </div>
        <div class="grupo">
            <label for="altura">Altura:</label>
            <input id="altura" name="altura" type="text" placeholder="digite la altura del paciente" class="campo campo-medio">
        </div>
        <div class="grupo">
            <label for="gordura">% de Gordura:</label>
            <input id="gordura" type="text" placeholder="digite el porcentaje de gordura del paciente" class="campo campo-medio">
        </div>
        <button id="adicionar-paciente" class="boton bto-principal">Adicionar</button>
    </form>

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

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

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

        console.log(nombre);
        console.log(peso);
        console.log(altura);
        console.log(gordura);

        pacienteTr = document.createElement("tr");
        nombreTd = document.createElement("td");
        alturaTd = document.createElement("td");
        pesoTd = document.createElement("td");
        gorduraTd = document.createElement("td");
        imcTd = document.createElement("td");

        nombreTd.textContent = nombre;
        alturaTd.textContent = altura;
        pesoTd.textContent = peso;
        gorduraTd.textContent = gordura;

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

        console.log(pacienteTr);

    });
</script>
</body>
</html>

Espero tengas suerte. Y desde ya avisame sea cual sea el resultado. Estoy de tu lado jajajajaja. Vamos !!!