2014-10-06 25 views
0

好吧即時將複製意大利麪我的HTML和JS。但首先快速破敗,所以你明白我從哪裏來。難以讓我的頁面正常工作

本質上是在Javascript 101中進行的,我們大約有六週的時間。我有一個項目正在進行,我需要做以下所有事情。

要求

1.Design與結構(10分) 使用外部CSS和JS文件。 確保您有頁眉,頁腳,樣式文字,顏色等。 富有創意。

2.表格(10分) 您的項目必須使用表單。確保使用適當的字段類型並確保它們可以訪問。

3.jQuery(10分) 必須使用不顯眼的jQuery。至少,使用它來代替事件(.onload,.onclick,.onsubmit等)和.getElementById()。 (10分) 您的網站必須至少使用三個標籤:(1)您的課程,(2)您的表格,(3)結論/總結。您可以使用類中示例中的代碼,但要確保它有文檔記錄,樣式與示例完全不同。

5.文檔 (10分) 確保您的所有代碼都有詳細記錄。

所以現在你知道我在做什麼。問題是我們爲jQuery教授的所有內容都來自Codecademy或課堂。我們使用的書(現代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 &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,即時嘗試首先完成困難的事情,然後我可以完成「基本」的東西。此外,這是指我從JqueryUI.com下載的一些文件,以及它的大量縮小內容,我假設你不需要它,因爲它是一個巨大的文本牆。

解決問題。我的按鈕中沒有一個實際計算任何東西我不知道他們是否沒有正確鏈接,或者我的方程式沒有意義,如果它的語法等等。對這件事情如此無知,以及不知道在哪裏找到答案,這使得這非常令人沮喪。

最後,即時通訊不尋找有人爲我做功課。我很想理解這一點,爲什麼事情不起作用,我做錯了什麼。我上學要成爲網頁設計師,所以我需要明白這一點。

謝謝你提前。

(編輯:一些格式問題)

編輯兩個!

這裏是我使用JSfiddle更新的代碼,以及一些問題來完成這個。

我還有一些其他問題,特別是我希望我能得到幫助。這裏是第一次,更新JSfiddle: http://jsfiddle.net/vtexekn4/

我需要一些其他小事情的幫助。

首先,選項卡1中的無線電選擇應該在標籤2的結果中每天修改最終卡路里維護,我如何將它帶入等式? (我假設它將與輸入類型有關?我將如何編碼) 我怎樣才能使它不是一個警報,並且我用實際結果替換按鈕下方的「結果」一詞。所以文本交換,也使文本將停留在那裏(因爲警報本質上是一個窗口頂部,因此不允許你看到文本後,「確定」它,轉換計算器在那裏,讓你可以看到你的電話號碼發佈了什麼,我認爲如果你忘記了號碼,必須繼續發出提醒會有問題)

+0

既然你在101我不知道你是否已經發現了這個,但JSFiddle是一個很好的工具,用於發佈你的破損的例子,以便其他人可以看到什麼是破碎和'小提琴'來解決它。看起來很容易/沒有做,而不是視覺上想象你的代碼=) – 2014-10-06 10:43:28

回答

1

看來你已經混淆了jQuery的.html()方法。例如,您有類似:

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

的問題是,結果現在是一個數(因爲我們multipled 10 *某個值)。一個數字沒有.html()擴展方法,所以它會拋出一個錯誤。

我已經刪除了Caloric Maintenance Calc部分中的.html(),並添加了一條警告來向您顯示等於什麼結果。這應該給你一個很好的起點。填寫你的體重,身高和年齡,然後點擊計算,然後它將顯示一個帶有result的警告對話框。

這裏的JSFiddle

您也不妨考慮使用類似Chrome的開發者工具,Firefox的螢火蟲等,爲調試你的Javascript。

+0

好吧,首先,對於JSfiddle的建議,我現在在上面的編輯中使用它。其次,刪除.html將其修正爲公式,並且知道我擁有大部分代碼是很好的。我還有其他一些問題,特別希望你或其他人能夠提供幫助。我把它們放在編輯主題的末尾。非常感謝您的先生,您是絕對的生命保護者。 – 2014-10-06 11:46:17

+0

@KyleSchmelzer很高興幫助。 TBH你最好爲新問題開一個新問題=)......警報只是一個例子,可以告訴你結果實際上是有效的。看看.html(字符串)的例子 - > http://api.jquery.com/html/#html2 – 2014-10-06 12:27:41

+0

@KyleSchmelzer http://jsfiddle.net/vtexekn4/6/ - 我刪除了標籤'導致它不工作。但它說明了你想要做什麼。 – 2014-10-06 12:34:59