Передача данных формы HTML в функцию Javascript

Question

Я создал форму с одним выпадающим меню на выбор, а также три других текстовых поля для ввода данных пользователями.

Мне нужно выполнить вычисления по данным, вводимым пользователем, а затем отобразить результаты.

На данный момент я просто хочу иметь возможность передавать результаты в функцию и распечатывать результаты. Оттуда я выясню, как отображать эти выходы в таблице.

Прямо сейчас, у меня возникли проблемы с идентификацией значения конкретного элемента. В раскрывающемся меню я могу определить выбранное значение, написав document.getElementById("activity_level").value. Остальные значения не будут отображаться при запуске функции. Я предполагаю, что я не определяю тип значения, чтобы браузер знал, что такое дисплей.

Вот мой 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> 

Вот мой 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

Вы должны ссылаться на value свойство на ваших входах, так же, как вы сделали с вашей выберите

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

должно быть

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

Кроме того, рассмотрите возможность создания div для всего вывода и его записи.

<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;