文章/答案/技术大牛

发布

社区首页 >问答首页 >让我的页面正常工作有困难

问让我的页面正常工作有困难
EN

Stack Overflow用户

提问于 2014-10-06 09:29:00

回答 1查看 86关注 0票数 0

好的，我马上要复制意大利面食，我的HTML和JS。但先做个简单的测试，让你知道我从哪里来。

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

需求

1.设计和结构(10点)使用外部CSS和JS文件。确保你有一个页眉，页脚，样式文本，颜色等。要有创意。

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

3.必须使用jQuery (10分)非突出的jQuery。至少，用它来代替事件(.onload，.onclick，.onsubmit等)和.getElementById()。

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

5.文档(10点)确保所有代码都有良好的文档化。

现在你知道我想做什么了。问题是，我们学到的所有东西都是来自jQuery，或者是来自科德勒密，或者是在课堂上。我们使用的这本书( Larry的现代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>

，这是我的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的结果中修改每日维持热量的结束量，我怎样才能把它带入方程呢？(我想这与输入类型有关吧？我将如何编码)如何才能使它不再是警报，并将按钮下面的单词“结果”替换为实际的结果。因此，一个文本交换，也使得文本将留在那里(因为警报本质上是顶部的一个窗口，因此不允许您在u "ok“之后看到文本，转换计算器也在那里，这样您就可以看到您的号码是什么了。我认为，如果你忘记了号码，那么必须继续回复警报是有问题的。)

jquery-ui

javascript

jquery

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-10-06 11:03:29

您似乎混淆了.html() jquery方法。例如，您有如下内容：

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

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

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

这是JSFiddle

您还可以考虑使用Chrome的开发工具、Firefox的Firebug等来调试Javascript。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26213390

复制

相似问题

问让我的页面正常工作有困难
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问让我的页面正常工作有困难EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问让我的页面正常工作有困难
EN