Question

好的我马上要复制面食我的HTML和JS。但请先快速了解，以便了解我的来源。

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

要求

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

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

3.jQuery（10分）必须使用不显眼的jQuery。至少，使用它来代替事件（.onload，.onclick，.onsubmit等）和.getElementById（）。

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

5.Documentation （10点）确保所有代码都有详细记录。

所以现在你知道我想要完成什么。问题是我们为jQuery教授的一切都来自Codecademy，或者是在课堂上。我们使用的这本书（现代Javascript - 由Larry Ullman开发和设计）对jQuery一无所知。正如您在要求中看到的那样，我无法使用＆＃34; getelementid＆＃34;这样，我明白如何使用。

所以在这一点上，我不知道我是否完全迷失了，或者它只是语法问题，我真的输了。我所拥有的或多或少是我对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>

这是我的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等等，但这很容易imo，我试图先完成硬件，然后我可以完成＆＃34;基本＆＃34;东西。这也是我从JqueryUI.com下载的一些文件，以及它的大量缩小内容，我认为你不需要它，因为它是一个巨大的文本墙。

关于问题。我的按钮都没有实际计算任何东西。我不知道他们是否没有正确联系，或者我的方程式没有意义，如果它的语法等等。在这个问题上如此无能，而且不知道在哪里找到答案就是让这非常令人沮丧。

最后，我没有找人直接为我做功课。我想要理解这一点，为什么事情不起作用，以及我做错了什么。我去学校做网页设计师，所以我需要了解这一点。

提前谢谢你。

（编辑：一些格式问题）

编辑两个！

这是我使用JSfiddle更新的代码，以及一些完成此任务的问题。

我还有其他几个问题，我希望能得到帮助。这是第一个关闭，更新的JSfiddle： http://jsfiddle.net/vtexekn4/

我需要帮助处理其他一些小事。

首先，选项卡1中的无线电选择应该在标签2的结果中每天修改最终卡路里维护，如何将其带入等式？（我假设它将与输入类型有关？我将如何编码）我怎么能拥有它以使它不是一个警报，并且我取代了＆＃34;结果＆＃34;按钮下方，带有实际结果。所以文本的交换，也是为了使文本保持在那里（因为警报本质上是一个窗口在顶部，因此不允许你看到文本后，＆＃34; ok＆＃34;它和转换计算器在那里，你可以看到你的号码发布了什么。我认为如果忘记了这些号码，必须继续回复警报会有问题。）

Answer 1

看来你混淆了.html() jquery方法。例如，你有类似的东西：

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

问题是结果现在是一个数字（因为我们将10 *乘以某个值）。数字没有.html()扩展方法，因此会抛出错误。

我已经删除了卡路里维护计算部分的.html()并添加了一个警告，以显示结果等于什么。这应该给你一个很好的起点。填写您的体重，身高和年龄，然后点击计算，然后它会显示result的警告对话框。

这里是JSFiddle

您可能还希望使用Chrome的开发者工具，Firefox的Firebug等来调试您的Javascript。

无法让我的页面正常工作

1 个答案: