Я делаю калькулятор BMI, используя HTML и jQuery.
<form id="bmicalc">
<fieldset>
<legend>BMI Calculator:</legend>
<p>
<label>Height:
<input type="number" id="height1" min="3" max="7">ft
<input type="number" id="height2" min="0" max="11">in</label>
</p>
<p>
<label>Weight:
<input type="number" id="weight" min="1" max="1400">lb</label>
</p>
<p>
<label>BMI:
<input id="bmi" type="number" min="1" max="200">
</label>
</p>
<p>
<input type="button" id="tehbaton" value="Check your BMI">
</p>
</fieldset>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js">
var height = $("#height1").val()*12 + $("#height2").val(); //Height in Inches
var weight = $("#weight").val();
$("#tehbaton").click(function(){
$("#bmi").val(703*weight/(height^2));
});
</script>
Вот скрипка: http://jsfiddle.net/uzD9C/
Я изначально хотел, чтобы расчет выполнялся на клавиатуре, но решил, что я не знаю достаточно, чтобы это сделать. Поэтому я просто хочу обновить третье поле ввода, нажав кнопку отправки.
Но, как и сейчас, нажатие кнопки ничего не делает.
Уравнение для расчета ИМТ: BMI = (Вес в фунтах/(Высота в дюймах x Высота в дюймах)) x 703
Попробуй это:
$("#tehbaton").click(function () {
if($("#height1").val() && $("#height2").val() && $("#weight").val()){
var height = Number($("height1").val()) * 12 + Number($("height2").val());
var weight = $("#weight").val();
$("#bmi").val((703 * weight) / Math.pow(height,2));
}
});
Вот скрипка
src
. Закройте тегjquery.js
, добавьте другой тег для своего кода<script>
, у которого установлен атрибутsrc
. Также, если вы исправите это и переместите ваш вар в функцию щелчка, это должно сработать. проверить это обновление скрипки: jsfiddle.net/uzD9C/4