1

muy buenas a todos.

Antes que nada pido disculpas por mi falta de conocimientos con respecto a la programación. Recién me estoy iniciando en este mundo. Estoy haciendo una página de prueba con HTML y JavaScript pero tengo el problema de no saber cómo obtener, desde JavaScript, los datos que el usuario ingresa en la página web y cargarlos a variables que están dentro de JavaScript. Si tuviese las variables de JavaScript con los datos cargados por el usuario, entonces podría realizar, mediante una función, unos cálculos para determinar la Tasa metabólica basal de una persona. A continuación, les muestro de manera parcial el código en HTML:

let sexo
let peso
let estatura
let edad
let actividad

window.addEventListener("load", iniciarTesteo)

function iniciarTesteo() {
  let botonCalcular = document.getElementById("boton-calcular")
  botonCalcular.addEventListener("click", sub, calculoParcialTmb)
}

function sub() {
  let inputHombre = document.getElementById("hombre")
  let inputMujer = document.getElementById("mujer")

  if (inputHombre.checked) {
    sexo = "hombre"
  } else if (inputMujer.checked) {
    sexo = "mujer"
  }

  peso = parseFloat(getElementById("kg").value);
  estatura = parseFloat(document.getElementById("cm").value);
  edad = parseInt(document.getElementById("años").value);
}

function calculoParcialTmb() {
  let resultado

  if (sexo == "hombre") {
    resultado = ((10 * peso) + (6.25 * estatura)) - (5 * edad) + 5
  } else {
    resultado = ((10 * peso) + (6, 25 * estatura)) - (5 * edad) - 161
  }

  mensajeFinal(resultado)
}

function mensajeFinal(resultado) {
  let sectionMensajes = document.getElementById("mensaje-resultado")
  let parrafo = document.createElement("p")
  parrafo.innerHTML = "Tu Tasa Metabólica Basal es de: " + resultado

  sectionMensajes.appendChild(parrafo)
}
<html>

<head>
  <meta charset="utf-8" />

  <title>TASA METABÓLICA BASAL</title>

  <script src="codigo-tmb.js"></script>

</head>

<body>
  <h1 id="tmb">TASA METABÓLICA BASAL</h1>

  <section id="conocer-tmb">
    <h2 class="subtitulo">Conozca su Tasa Metabólica Basal</h2>

    <p>A continuación, seleccione su peso, sexo, estatura, edad y nivel de actividad para determinar su Tasa Metabólica Basal (TMB):
    </p>
  </section>

  <section id="elegir-sexo">
    <strong>Sexo: </strong> <input type="radio" name="sexo" id="hombre" />
    <label for="hombre">Hombre</label>
    <input type="radio" name="sexo" id="mujer" />
    <label for="mujer">Mujer</label>

  </section>

  <section id="elegir-peso">
    <strong>Peso: </strong> <input type="number" name="peso" id="kg" />
    <label for="kg">Kg</label>

  </section>

  <section id="elegir-estatura">
    <strong>Estatura: </strong> <input type="number" name="estatura" id="cm" />
    <label for="cm">Cm</label>

  </section>

  <section id="elegir-edad">
    <strong>Edad: </strong> <input type="number" name="edad" id="años" />
    <label for="años">Años</label>

  </section>

  <section id="nivel-actividad">
    <strong>Nivel de actividad: </strong>
    <select name="actividad" id="actividad">

Acá dejo una captura de la página web de prueba: introducir la descripción de la imagen aquí

1
  • Si se refiere a los datos que el usuario digito al momento de iniciar sesion en el sitio normalmente estan disponibles en los datos de sesion pero del lado del servidor, no del lado del cliente, a menos que el sitio los almacene en session storage del navegador o en las cookies del del sitio. La pregunta de la manera que esta formulada es demasiado ampila y requiere que usted haga la tarea de diseccionar la pagina de entrada del sitio para verificar si en ese momento se almacenan en el lado del cliente dichos datos de manera que los tenga disponibles desde el navegador. De otro modo tend Commented el 19 ago. 2022 a las 5:50

2 respuestas 2

0

Hola pablo por lo que vi tenes el llamado al JS en el head, lo mejor es que lo pongas al final del codigo

<html>
    <head>
        <meta charset="utf-8" />

        <title>TASA METABÓLICA BASAL</title>    

       
    
    </head>

    <body>
        <h1 id="tmb">TASA METABÓLICA BASAL</h1>

        <section id="conocer-tmb">
            <h2 class="subtitulo">Conozca su Tasa Metabólica Basal</h2>
            
            <p>A continuación, seleccione su peso, sexo, estatura, edad y nivel de actividad para 
                determinar su Tasa Metabólica Basal (TMB):
            </p>
        </section>        
        
        <section id="elegir-sexo">
            <strong>Sexo: </strong> 
            <input type="radio" name="sexo" id="hombre"/>
            <label for="hombre">Hombre</label>
            <input type="radio" name="sexo" id="mujer"/>
            <label for="mujer">Mujer</label>            

        </section>            

        <section id="elegir-peso">
            <strong>Peso: </strong> 
            <input type="number" name="peso" id="kg"/>
            <label for="kg">Kg</label>            

        </section>

        <section id="elegir-estatura">
            <strong>Estatura: </strong> 
            <input type="number" name="estatura" id="cm"/>
            <label for="cm">Cm</label>            

        </section>

        <section id="elegir-edad">
            <strong>Edad: </strong> 
            <input type="number" name="edad" id="años"/>
            <label for="años">Años</label>            

        </section>

        <section id="nivel-actividad">
            <strong>Nivel de actividad:</strong>
            <select name="actividad" id="actividad">
                <option>Sedentario</option>
                <option>Actividad Lijera</option>
                <option>Actividad Moderada</option>
                <option>Actividad Intensa</option>
                <option>Actividad Muy Intensa</option>
            </select>
        </section>

        <section id="calcular">
            <button id="boton-calcular" onclick="calculoParcialTmb()">Calcular</button>
        </section>

        <section id="resultado">
            <h2 class="subtitulo-2">Resultado</h2>
        </section>

        <section id="mensaje-resultado">            

        </section>
        <script src="codigo-tbm.js"></script>
    </body>

</html>

otra cosa te agregue en el boton la funcion onclick="calculoParcialTmb()" para que al hacer clik te llame a esa funcion y ademas te recorte el JS por que algunas variables no se podían ver entre funciones

let sexo
let peso
let estatura
let edad
let actividad


function calculoParcialTmb() {
    let resultado

    peso = parseFloat(document.getElementById("kg").value);
    estatura = parseFloat(document.getElementById("cm").value);
    edad = parseInt(document.getElementById("años").value);
    let inputHombre = document.getElementById("hombre")
    if (inputHombre.checked) {
        
        resultado = ((10 * peso) + (6.25 * estatura)) - (5 * edad) + 5
    }
    else {
        resultado = ((10 * peso) + (6, 25 * estatura)) - (5 * edad) - 161
    }

    mensajeFinal(resultado)
}

function mensajeFinal(resultado) {
    let sectionMensajes = document.getElementById("mensaje-resultado")

    let parrafo = document.createElement("p")
    parrafo.innerHTML = "Tu Tasa Metabólica Basal es de: " + resultado

    sectionMensajes.appendChild(parrafo)
} 

1
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 19 ago. 2022 a las 6:30
0

Muchas gracias por su interés en responder a mi pregunta. Les comento que pude solucionar mi problema.

En respuesta a quién me sugirió colocar el llamado a Js al final del código, te comento que como tengo la función "window.addEventListener("load", iniciarTesteo)" al inicio, ésta carga todo el archivo HTML primero y, luego, ejecuta la primera función de Js.

También me habían sugerido colocar en el botón del HTML la función onclick="calculoParcialTmb()" pero decidí llamar a la primera función, desde js, con la función addEventListener("click") cuando se presione el botón "Calcular".

Ahora bien ¿Cómo pude solucionar mi problema que no cargaba con datos las variables? Colocando SÓLO la función "sub()" de la siguiente manera:

function iniciarTesteo() {    
    let botonCalcular = document.getElementById("boton-calcular")
    botonCalcular.addEventListener("click", sub)    
}

Antes, en el anterior código (el que fallaba) colocaba, también, la función "calculoParcialTmb" y ésta al parecer no se ejecutaba. Así que metí ésta última función dentro de la función "sub()" y al final de todo, así se ejecuta primero "sub" y luego "calculoParcialTmb". De todos modos, me queda la DUDA del POR QUÉ no se ejecutaba, luego de "sub", la función "calculoParcialTmb" cuando estaba en el parámetro de "botonCalcular.addEventListener". Si alguien sabe, agradezco su colaboración.

Muchas gracias.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.