JQuery BMI уравнение не работает в форме тега
Застрял в этом на несколько часов, исчерпав идеи. У меня есть два уравнения ИМТ (метрический, стандартный), оба работают правильно. Я настроил их на вкладках пользовательского интерфейса Jquery с помощью формы. Первое уравнение (метрика) работает отлично. Я не могу заставить работать второе уравнение. Это работает, когда оно автономно, но не когда я вставляю его с первым уравнением. Не должен ли я создать новый тег сценария для второго уравнения?
<html>
<head>
<link rel="stylesheet" href="../jquery-ui/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="../jquery-mousewheel-master/jquery.mousewheel.min.js"></script>
<script>
$(function() {
// get user input
var input = function() {
var height = $("#height").val();
var weight = $("#weight").val();
var calculated_bmi = BMI(height, weight);
$('#result').text(calculated_bmi);
}
var BMI = function(h, w) {
// convert into centimeters
var h = h / 100;
var h_squared = h * h;
var result = w / h_squared;
return result.toFixed(1);
}
$("#calculate").click(function() {
input();
})
$(function() {
$("#tabs").tabs();
});
$("#weight").spinner();
$("#height").spinner();
});
</script>
<script>
"use strict";
$(function() {
$("#bmicalc").submit(function(e) {
e.preventDefault();
var heightFt = $("#height_ft").val();
heightIn = $("#height_in").val();
height = parseFloat(heightFt * 12) + parseFloat(heightIn);
weight = $("#weight1").val();
BMI = calculateBMI(height, weight);
$("#result2").text('Your BMI is ' + BMI);
});
function calculateBMI(height, weight) {
var BMI = (weight / (height * height)) * 703
return Math.round(BMI * Math.pow(10, 2)) / Math.pow(10, 2);
}
$("#weight").spinner();
$("#height").spinner();
$("#height_ft").spinner();
$("#height_in").spinner();
$("#weight1").spinner();
});
</script>
</head>
<body>
<div class="wrapper">
<h2 class="subtitle">Enter your information</h2>
<form id="bmicalc">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Metric</a></li>
<li><a href="#tabs-2">Standard</a></li>
</ul>
<div id="tabs-1">
<div>
<div>
Height (centimeters): <input type="spinner" id="height" min="1" max="300"> Weight (kilograms): <input type="spinner" id="weight" min="1" max="450">
</div>
<input type="button" id="calculate" value="Calculate">
<p class="resultwords">Your BMI is: <span id="result"></span></p>
</div>
</div>
<div id="tabs-2">
<div id="calc-id2">
<p>
<label>Height:
<input type="text" id="height_ft" min="1" max="10">feet
<input type="text" id="height_in" min="1" max="11">inches</label>
</p>
<p>
<label>Weight:
<input type="text" id="weight1" min="1" max="1000">pounds</label>
</p>
<input type="submit" id="bmicalc1" value="Calculate">
<p class="resultwords">Your BMI is: <span id="result2"></span></p>
</div>
</div>
</div>
</form>
</div>
</body>
</html>