Pasar datos de formulario HTML a Javascript Función

Question

He creado un formulario con un menú desplegable para elegir, así como otros tres campos de texto para que los usuarios ingresen datos.

Necesito realizar cálculos sobre los datos que el usuario ingresa y luego mostrar los resultados. Por ahora, solo quiero poder pasar los resultados a la función e imprimir los resultados. A partir de ahí, descubriré cómo mostrar esas salidas en una tabla.

En este momento, tengo problemas para identificar el valor del elemento específico. Con el menú desplegable, puedo identificar el valor elegido escribiendo document.getElementById("activity_level").value. El resto de los valores no aparecerán cuando ejecute la función. Supongo que no estoy identificando el tipo de valor para que el navegador sepa qué es la pantalla.

Aquí es mi HTML:

<form> 
     Activity Level: <select id="activity_level"> 
         <option value="null">Please Choose One...</option> 
         <option value="1.25">Practically a Vegetable</option> 
         <option value="1.35">Mostly Desk Work and Light Walking</option> 
         <option value="1.55">Moderate Exercise 2-3 Times Per Week</option> 
         <option value="1.75">Heavy Exercise 3-4 Times Per Week</option> 
         <option value="1.95">Committed Hardcore Athlete</option> 
         </select></br> 
     BodyFat Percentage <input type="text" id="bfp" /> </br> 
     Total Weight <input type="text" id="tw" /></br> 
     Target Bodyfat Percentage <input type="text" id="target_bodyfat_pct" /></br> 
     <input type="button" value="Calculate" onclick="Calculate()" /> 
    </form> 

Aquí es mi javascript:

<script type="text/javascript"> 

    function Calculate(){ 
     //document.write(bfp + "</br>"); 
     document.write(document.getElementById("activity_level").value + "</br>"); 
     //document.write(document.getElementById("tw") + "</br>"); 
     //document.write(document.getElementById("target_bodyfat_pct")); 
    } 

    </script> 

Answer 1

Es necesario hacer referencia a la propiedad value en sus entradas, al igual que lo hizo con su selecto

document.write(document.getElementById("target_bodyfat_pct")); 
document.write(document.getElementById("tw") + "</br>"); 

debe ser

document.write(document.getElementById("target_bodyfat_pct").value); 
document.write(document.getElementById("tw").value + "</br>"); 

Además, considere crear un div para todos los resultados y escribirlo allí.

<div id="yourOutputDiv"></div> 

var results = document.getElementById("activity_level").value + "</br>" + 
       document.getElementById("target_bodyfat_pct").value + 
       document.getElementById("tw").value + "</br>"; 

document.getElementById("yourOutputDiv").innerHTML = results;