无法让我的页面正常工作

Question

Ok im going to copy pasta my HTML and JS in a moment. 好的，我稍后会复制面食我的HTML和JS。 but a quick rundown first so you understand where im coming from. 但首先要快速了解一下，以便您了解即时消息的来源。

Im in Javascript 101 essentially, and we're about six weeks in. I have a project going on where i need to do all of the following. 我基本上是在Javascript 101中，大约六周了。我正在进行一个项目，我需要做以下所有工作。

Requirements 要求

1.Design and structure (10 points) Use external CSS and JS files. 1.设计和结构（10分）使用外部CSS和JS文件。 Make sure you have a header, footer, styled text, colors, etc. Be creative. 确保您具有页眉，页脚，样式文本，颜色等。要有创意。

2.Forms (10 points) Your project must use forms. 2.表格（10分）您的项目必须使用表格。 Make sure to use the appropriate field types and make sure they are accessible. 确保使用适当的字段类型，并确保它们可访问。

3.jQuery (10 points) Unobtrusive jQuery must be used. 3.jQuery（10分）必须使用不引人注目的jQuery。 At a bare minimum, use it in place of events (.onload, .onclick, .onsubmit, etc.) and .getElementById(). 至少要使用它代替事件（.onload，.onclick，.onsubmit等）和.getElementById（）。

4.Tabs (10 points) Your site must use at least three tabs: (1) your lesson, (2) your form, (3) conclusion /wrap up. 4.选项卡（10分）您的站点必须至少使用三个选项卡：（1）您的课程，（2）您的表格，（3）结论/总结。 You may use the code from the example in class, but make sure it is documented and the styles are completely different than the example. 您可以在类中使用示例中的代码，但请确保将其记录为文档，并且样式与示例完全不同。

5.Documentation (10 points) Make sure all of your code is well documented. 5.Documentation（10分）确保所有代码都被正确记录。

So now you know what i am trying to accomplish. 所以现在您知道我要完成的工作。 Problem is the everything we were taught for jQuery was from either Codecademy, or in class. 问题在于我们为jQuery所教的一切都来自Codecademy或课堂。 The book we use (Modern Javascript - Develop and Design by Larry Ullman) has nothing about jQuery. 我们使用的书（《现代Javascript-开发和设计》，拉里·乌尔曼（Larry Ullman））与jQuery无关。 As you can see in the requirements, i cant use "getelementid" and such, which i do understand how to use. 如您在需求中所看到的，我不能使用“ getelementid”之类的东西，但我确实知道如何使用。

So at this point, i dont know if im completely lost, or if it's merely syntax issues, im literally that lost. 因此，在这一点上，我不知道即时消息是否完全丢失了，或者仅仅是语法问题，即时消息实际上就是丢失了。 What i do have is more or less my understanding of Jquery, mixed in with some code copied from a few examples. 我所拥有的或多或少是我对Jquery的理解，并结合了一些示例中复制的一些代码。

Here's my Html- 这是我的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>

And here is my Javascript: 这是我的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();
    });


});

Im also aware that i need a few other things, footer, some more CSS, etc. but thats easy imo, im trying to get the hard stuff done first, then i can finish the "basic" stuff. 我还知道我还需要其他一些内容，页脚，更多CSS等，但这很简单imo，我试图先完成困难的工作，然后再完成“基本”工作。 Also this refers to some files i downloaded from JqueryUI.com, and its massive minified content, i assume you dont need that since it's a massive wall of text. 这也指的是我从JqueryUI.com下载的一些文件及其大量的缩小内容，我认为您不需要它，因为它是大量的文本墙。

On to the problem. 解决问题。 None of my buttons actually calculate anything. 我的按钮实际上都没有计算任何东西。 I dont know if they're not linked correctly, or my equations dont make sense, if its syntax, etc. Being so clueless on the matter and not really knowing where to find the answers is making this quite frusturating. 我不知道它们是否连接不正确，或者我的方程式没有意义，语法是否正确等等。对这一问题如此无能为力，并且不知道在哪里找到答案的问题，这真令人沮丧。

Finally, im not looking for somebody to outright do my homework for me. 最后，我不找人为我做功课。 I do want to understand this, why things aren't working, and what i did wrong. 我确实想了解这一点，为什么事情不起作用，我做错了什么。 I going to school to be a web designer, so i need to understand this going forward. 我要去学校当一名网页设计师，所以我需要理解这一点。

Thank you ahead of time. 提前谢谢你。

(edit: some formatting issues) （编辑：一些格式问题）

Edit two! 编辑两个！

Here is my updated code using JSfiddle, as well as a few questions to finish this up. 这是我使用JSfiddle更新的代码，以及一些完成此操作的问题。

I have a few other questions specifically im hoping i can get help with. 我还有其他一些问题，特别是希望我能得到帮助。 Here is first off, the updated JSfiddle: http://jsfiddle.net/vtexekn4/ 首先，是更新的JSfiddle： http : //jsfiddle.net/vtexekn4/

I need help with a couple other minor things. 我需要其他一些小帮助。

First, the radio selections in tab 1 are supposed to modify the end calorie maintenance daily in tab 2's result, how can i bring that in to the equation? 首先，选项卡1中的无线电选项应该每天修改选项卡2的结果中的最终卡路里维持量，我如何将其纳入方程式？ (Im assuming it would have to do with the input type? How would i code that) How can i have it so that it's not an alert, and that i replace the word "result" below the buttons, with the actual result. （我假设它必须与输入类型有关？我将如何编码）我如何拥有它以便它不是警报，并且我将按钮下方的“结果”一词替换为实际结果。 So a swap of text, also so that the text will stay there (since an alert is essentially a window on top, and therefor doesnt allow you to see the text after u "ok" it, and the conversion calculators are there so that you can see what your numbers are post. I think it would be problematic to have to keep going back to alerts if you forgot the numbers) 因此，交换文本也可以使文本保留在那里（因为警报本质上是顶部的窗口，因此不允许您在“确定”之后看到文本，并且转换计算器在那里，因此您可以看到您发布的电话号码。如果您忘记了电话号码，那么不得不继续返回警报会很麻烦）

Answer 1

It appears you have confused the .html() jquery method. 看来您对.html() jquery方法感到困惑。 For example you have something like: 例如，您有类似的内容：

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

The problem is that result is now a number (since we multipled 10 * some value). 问题在于结果现在是一个数字（因为我们乘以10 *一些值）。 A number does not have a .html() extension method so it is throwing an error. 数字没有.html()扩展方法，因此会引发错误。

I've removed the .html() on the Caloric Maintenance Calc section and added an alert to show you what result equals. 我已删除了热量维护计算部分中的.html() ，并添加了一条警报以向您显示结果相等。 This should give you a good starting point. 这应该为您提供一个良好的起点。 Fill in your Weight, Height and Age and click Calculate then it will show an alert dialog with the result . 填写您的体重，身高和年龄，然后单击计算，它将显示一个警告对话框，其中显示result 。

Here's the JSFiddle 这是JSFiddle

You might also wish to look into using something like Chrome's developer tools, Firefox's Firebug etc. for debugging your Javascript. 您可能还希望研究使用Chrome的开发人员工具，Firefox的Firebug等工具来调试Javascript。

无法让我的页面正常工作

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-10-06 11:03:29

无法让我的页面正常工作

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-10-06 11:03:29

解决方案1
1 已采纳 2014-10-06 11:03:29