Javascript 无法使我的页面正常工作_Javascript_Jquery_Html_Jquery Ui

Javascript 无法使我的页面正常工作

javascript jquery html jquery-ui

Javascript 无法使我的页面正常工作,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,好的，我马上就要复制我的HTML和JS了。不过先简单介绍一下，让你了解我的来历基本上我是Javascript 101的，我们大约有六周的时间。我有一个项目正在进行中，我需要做以下所有的事情要求 1.设计和结构（10分）使用外部CSS和JS文件。确保有页眉、页脚、样式文本、颜色等。要有创意 2.表格（10分）您的项目必须使用表单。确保使用适当的字段类型，并确保它们是可访问的 3.jQuery（10分）必须使用不引人注目的jQuery。至少使用它来代替事件（.onload、.oncli

好的，我马上就要复制我的HTML和JS了。不过先简单介绍一下，让你了解我的来历

基本上我是Javascript 101的，我们大约有六周的时间。我有一个项目正在进行中，我需要做以下所有的事情

要求

1.设计和结构（10分）使用外部CSS和JS文件。确保有页眉、页脚、样式文本、颜色等。要有创意

2.表格（10分）您的项目必须使用表单。确保使用适当的字段类型，并确保它们是可访问的

3.jQuery（10分）必须使用不引人注目的jQuery。至少使用它来代替事件（.onload、.onclick、.onsubmit等）和.getElementById（）

4.标签（10分）你的网站必须至少使用三个标签：（1）你的课程，（2）你的表格，（3）结论/总结。您可以在类中使用示例中的代码，但请确保它是文档化的，并且样式与示例完全不同

5.文件（10分）确保所有代码都有良好的文档记录

所以现在你知道我要做什么了。问题是，我们为jQuery所教的一切都来自编解码器或课堂。我们使用的那本书（Larry Ullman开发和设计的现代Javascript）没有关于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 &amp; 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>

我也知道我还需要一些其他的东西，页脚，一些CSS等等。但在我看来这很容易，我试着先完成一些困难的事情，然后我才能完成“基本”的事情。这也指的是我从JqueryUI.com下载的一些文件，以及它庞大的缩小内容，我想你不需要它，因为它是一堵巨大的文本墙

关于这个问题。我所有的按钮都没有计算任何东西。我不知道它们是否连接不正确，或者我的方程没有意义，语法是否合理等等。在这个问题上如此无知，不知道从哪里找到答案，这让我感到非常沮丧

最后，我不是在找人帮我做作业。我确实想了解这一点，为什么事情不起作用，以及我做错了什么。我去学校是为了成为一名网页设计师，所以我需要理解这一点

提前谢谢你

（编辑：一些格式问题）

编辑二

下面是我使用JSFIDLE更新的代码，以及一些问题来完成本文

我还有几个问题，我希望能得到帮助。首先，更新的JSFIDLE：

我还需要其他一些小事情的帮助

首先，表1中的无线电选择应该修改表2结果中的每日末端卡路里维持量，我如何才能将其纳入等式？（我假设这与输入类型有关？我将如何编写代码）

我怎样才能使它不是警报，并用实际结果替换按钮下方的“结果”一词。因此，交换文本，也就是说文本将留在那里（因为警报本质上是顶部的一个窗口，因此不允许您在“确定”后看到文本）它和转换计算器都在那里，这样你就可以看到你发布的数字了。我认为如果你忘记了数字，就必须继续返回警报会有问题）

看来你混淆了

.html（）

jquery方法。例如，您有如下内容：

result = (10 * $('#...').val()).html();

问题是结果现在是一个数字（因为我们将10乘以某个值）。数字没有

.html（）

扩展方法，因此它会抛出错误

我已经删除了卡路里维持计算部分的

.html（）

，并添加了一个警告，告诉您结果等于什么。这应该给你一个很好的起点。填写您的体重、身高和年龄，然后单击“计算”，它将显示一个带有

结果的警告对话框
这是我的建议
您可能还希望使用Chrome的开发工具、Firefox的Firebug等工具来调试Javascript。既然您是101人，我不知道您是否已经发现了这一点，但是JSFIDLE是一个很好的工具，可以发布您的坏例子，以便其他人可以看到坏的东西并“摆弄”它来修复它。看到它在做什么/没有做什么比直观地想象你的代码要容易得多（好的，首先，关于JSFIDLE的建议，我现在在上面的编辑中使用它。其次，删除.html修正了这个等式，很高兴知道我大部分代码都是正确的。我还有几个问题，特别是我希望你或其他人能帮我。我把它们放在编辑过的主题的末尾。非常感谢您，先生，您绝对是个救命恩人。@KyleSchmelzer很高兴它起了作用。TBH您最好为新问题开始一个新问题=）…警报只是一个示例，向您显示结果实际上是有效的。看看这里的.html（string）示例->@KyleSchmelzer-我删除了这些选项卡，因为它不起作用。但它说明了你到底想做什么。
result = (10 * $('#...').val()).html();