好的，我稍后将复制我的 HTML 和 JS 内容。但首先要快速概述一下，以便您了解我的来源。
我基本上已经进入了 Javascript 101，大约已经有六周了。我有一个项目正在进行，我需要执行以下所有操作。
要求
1.设计与结构(10分) 使用外部 CSS 和 JS 文件。 确保您有页眉、页脚、样式文本、颜色等。 要有创意。
2.表格(10分) 您的项目必须使用表单。确保使用适当的字段类型并确保它们可访问。
3.jQuery(10分) 必须使用不显眼的 jQuery。至少，使用它代替事件(.onload、.onclick、.onsubmit 等)和 .getElementById()。
4.标签(10分) 您的网站必须至少使用三个选项卡:(1) 您的类(class)，(2) 您的表格，(3) 结论/总结。您可以在类里面使用示例中的代码，但请确保它已记录并且样式与示例完全不同。
5.文档 (10分) 确保您的所有代码都有详细记录。
所以现在你知道我想要实现什么了。问题是我们学到的 jQuery 知识要么来自 Codecademy，要么来自类。我们使用的书(Modern Javascript - Larry Ullman 的开发和设计)没有任何关于 jQuery 的内容。正如您在要求中看到的，我不能使用“getelementid”等，我确实了解如何使用。
所以在这一点上，我不知道我是否完全迷失了，或者仅仅是语法问题，我确实迷失了。我所拥有的或多或少是我对 Jquery 的理解，混合了从一些示例复制的一些代码。
这是我的 Html-
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Health Calculator</title>
<link id="theme" href="vader/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
</head>
<body>
<h2>Health Calculator</h2>
<!-- tabs setup for page -->
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">
<p><strong>Exercise</strong></p>
<!-- Form for page one -->
<form>
<p><strong>Activity factor</strong></p>
<!-- Setup Radio buttons -->
<p>
<input type="radio" name="activity" id="sed">
<label for="sed" id="sedLabel">Sedentary = BMR X 1.2 (little or no exercise, desk job)</label>
</p>
<p>
<input type="radio" name="activity" id="lit">
<label for="lit" id="litLabel">Lightly active = BMR X 1.375 (light exercise/sports 1-3 days/wk)</label>
</p>
<p>
<input type="radio" name="activity" id="mod">
<label for="mod" id="modLabel">Mod. active = BMR X 1.55 (moderate exercise/sports 3-5 days/wk)</label>
</p>
<p>
<input type="radio" name="activity" id="very">
<label for="very" id="veryLabel">Very active = BMR X 1.725 (hard exercise/sports 6-7 days/wk)</label>
</p>
<p>
<input type="radio" name="activity" id="ext">
<label for="ext" id="extLabel">Extr. Active = BMR X 1.9 (hard daily exercise/sports & physical job or 2 X day training, marathon, football camp, contest, etc.)</label>
</p>
</form>
</p>
</div>
<div id="tabs-2">
<!-- tab 2 -->
<p>Diet - Caloric maintenance</p>
<!-- The equation is currently shown for reference -->
<p>Men: BMR = 66 + (13.7 X wt in kg) + (5 X ht in cm) - (6.8 X age in years)</p>
// Form for weight, height, and age of Caloric Maintenance calc.
<!-- Form to all text entry for values -->
<form>
<label for="txtWeight">Weight:</label>
<input type="text" class="txtInput" id="txtWeight" value="0">
<label for="txtHeight">Height:</label>
<input type="text" class="txtInput" id="txtHeight" value="0">
<label for="txtAge">Age:</label>
<input type="text" class="txtInput" id="txtAge" value="0">
<br>
<input type="button" id="btnCalc1" value="Calculate"> <p id="result">Result</p>
</form>
<p>------------------------------------------</p>
<br>
<form>
<label for="txtWeight">Lbs to Kg::</label>
<input type="text" class="txtInput" id="txtLbs" value="0">
<br>
<input type="button" id="btnCalc2" value="Calculate"> <p id="result2">Result</p>
<label for="txtHeight">Inches to Cm:</label>
<input type="text" class="txtInput" id="txtInch" value="0">
<br>
<input type="button" id="btnCalc3" value="Calculate"> <p id="result3">Result</p>
</form>
</div>
<div id="tabs-3">
<!-- tab 3 -->
<p>BMI Calculator</p>
<!-- The equation is currently shown for reference -->
<p>BMI = (Mass (lb)/height(in)^2) * 703</p>
<!-- Form to all text entry for values -->
<form>
<label for="txtMass">Mass in Lbs:</label>
<input type="text" class="txtInput" id="txtMass" value="0">
<label for="txtHinch">Height in Inches:</label>
<input type="text" class="txtInput" id="txtInput" value="0">
<br>
<input type="button" id="btnCalc4" value="Calculate"> <p id="result4">Result</p>
</form>
</div>
<!-- This whole section below blows my damn mind -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery-ui.custom.min.js"></script>
<script src="Class11Example.js"></script>
</body>
</html>
这是我的 Javascript:
$(function(){
$('#tabs').tabs();
// attach event listener to button click
$('.themeButton').click(function(){
// This was stuff i got from a class example, i tried erasing it but without it my page doesnt work. I no longer have the button so i don understand why i need it.
$('#theme').attr("href", this.id + "/jquery-ui-1.10.4.custom.min.css");
});
});
// Tab 2
$(function(){
//Identify Variables
var txtWeight, txtHeight, txtAge;
// attach event listener to the toggle button's click event
$('#btnCalc1').click(function(){
result = 66 + (13.7 * $('#txtWeight').val()) + (5 * $('#txtHeight').val()) - (6.8 * $('#txtAge').val()).html();
});
});
// Still Tab 2, but second half
$(function(){
//Identify Variables
var txtInch, txtLbs;
// attach event listener to the toggle button's click event
$('#btnCalc3').click(function(){
result3 = $('#txtInch').val() * 2.54.html();
});
$('#btnCal2').click(function() {
result2 = $('#txtLbs').val() * 0.45359237.html();
});
});
//Tab 3
$(function(){
//Identify Variables
var txtMass, txtHinch;
// attach event listener to the toggle button's click event
$('#btnCalc3').click(function(){
result4 = $('#txtMass').val() / (($('#txtHinch')^2) * 703).html();
});
});
我也知道我需要一些其他的东西，页脚，更多的 CSS 等等。但这很容易，我想先完成困难的事情，然后我可以完成“基本”的事情。另外，这指的是我从 JqueryUI.com 下载的一些文件，及其大量缩小的内容，我认为您不需要它，因为它是一个巨大的文本墙。
说到问题。我的按钮实际上没有计算任何东西。我不知道它们是否没有正确链接，或者我的方程是否没有意义，是否有语法等等。对此事如此无知并且不知道在哪里可以找到答案，这使得这非常令人沮丧。
最后，我不是在找人直接帮我做作业。我确实想了解这一点，为什么事情不起作用，以及我做错了什么。我上学的目的是成为一名网页设计师，所以我需要了解这一点。
提前谢谢您。
(编辑:一些格式问题)
编辑两个!
这是我使用 JSfiddle 更新的代码，以及一些完成此操作的问题。
我还有一些其他问题，希望能得到帮助。首先是更新后的 JSfiddle: http://jsfiddle.net/vtexekn4/
我需要一些其他小事情的帮助。
首先，选项卡 1 中的单选选项应该会修改选项卡 2 结果中每日的最终卡路里维持量，我如何将其带入方程式？ (我假设这与输入类型有关？我将如何编码) 我怎样才能拥有它，这样它就不是警报，并且我将按钮下方的“结果”一词替换为实际结果。因此，交换文本，也使文本保留在那里(因为警报本质上是顶部的窗口，因此不允许您在“确定”后看到文本，并且转换计算器在那里，以便您可以看到您发布的号码。我认为如果您忘记了号码，则必须继续返回警报会出现问题)
最佳答案
看来您混淆了 .html() jquery 方法。例如，您有类似的内容:
result = (10 * $('#...').val()).html();
问题是结果现在是一个数字(因为我们乘以 10 * 某个值)。数字没有 .html() 扩展方法，因此会引发错误。
我删除了“热量维持计算”部分中的 .html()，并添加了一个警报以显示结果相等。这应该为您提供一个良好的起点。填写您的体重、高度和年龄，然后单击“计算”，然后它将显示一个带有结果的警报对话框。
这是JSFiddle
您可能还希望考虑使用 Chrome 的开发人员工具、Firefox 的 Firebug 等工具来调试 Javascript。
关于javascript - 无法让我的页面正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26213390/