javascript - Having trouble getting my page to work properly -
ok im going re-create pasta html , js in moment. quick rundown first understand im coming from.
im in javascript 101 essentially, , we're 6 weeks in. have project going on need of following.
requirements
1.design , construction (10 points) utilize external css , js files. create sure have header, footer, styled text, colors, etc. creative.
2.forms (10 points) project must utilize forms. create sure utilize appropriate field types , create sure accessible.
3.jquery (10 points) unobtrusive jquery must used. @ bare minimum, utilize in place of events (.onload, .onclick, .onsubmit, etc.) , .getelementbyid().
4.tabs (10 points) site must utilize @ to the lowest degree 3 tabs: (1) lesson, (2) form, (3) conclusion /wrap up. may utilize code illustration in class, create sure documented , styles different example.
5.documentation (10 points) create sure of code documented.
so know trying accomplish. problem taught jquery either codecademy, or in class. book utilize (modern javascript - develop , design larry ullman) has nil jquery. can see in requirements, cant utilize "getelementid" , such, understand how use.
so @ point, dont know if im lost, or if it's simply syntax issues, im literally lost. have more or less understanding of jquery, mixed in code copied few examples.
here's 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 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 page 1 --> <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 & physical job or 2 x day training, marathon, football game camp, contest, etc.)</label> </p> </form> </p> </div> <div id="tabs-2"> <!-- tab 2 --> <p>diet - caloric maintenance</p> <!-- equation shown reference --> <p>men: bmr = 66 + (13.7 x wt in kg) + (5 x ht in cm) - (6.8 x age in years)</p> // form weight, height, , age of caloric maintenance calc. <!-- form text entry 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 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 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> <!-- equation shown reference --> <p>bmi = (mass (lb)/height(in)^2) * 703</p> <!-- form text entry 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> <!-- whole section below blows 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 javascript:
$(function(){ $('#tabs').tabs(); // attach event listener button click $('.themebutton').click(function(){ // stuff got class example, tried erasing without page doesnt work. no longer have button don understand why 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 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, sec half $(function(){ //identify variables var txtinch, txtlbs; // attach event listener 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 toggle button's click event $('#btncalc3').click(function(){ result4 = $('#txtmass').val() / (($('#txthinch')^2) * 703).html(); }); }); im aware need few other things, footer, more css, etc. thats easy imo, im trying hard stuff done first, can finish "basic" stuff. refers files downloaded jqueryui.com, , massive minified content, assume dont need since it's massive wall of text.
on problem. none of buttons calculate anything. dont know if they're not linked correctly, or equations dont create sense, if syntax, etc. beingness clueless on matter , not knowing find answers making quite frusturating.
finally, im not looking outright homework me. want understand this, why things aren't working, , did wrong. going school web designer, need understand going forward.
thank ahead of time.
(edit: formatting issues)
edit two!
here updated code using jsfiddle, few questions finish up.
i have few other questions im hoping can help with. here first off, updated jsfiddle: http://jsfiddle.net/vtexekn4/
i need help couple other minor things.
first, radio selections in tab 1 supposed modify end calorie maintenance daily in tab 2's result, how can bring in equation? (im assuming have input type? how code that) how can have it's not alert, , replace word "result" below buttons, actual result. swap of text, text remain there (since alert window on top, , therefor doesnt allow see text after u "ok" it, , conversion calculators there can see numbers post. think problematic have maintain going alerts if forgot numbers)
it appears have confused .html() jquery method. illustration have like:
result = (10 * $('#...').val()).html(); the problem result number (since multipled 10 * value). number not have .html() extension method throwing error.
i've removed .html() on caloric maintenance calc section , added alert show result equals. should give starting point. fill in weight, height , age , click calculate show alert dialog result.
here's jsfiddle
you might wish using chrome's developer tools, firefox's firebug etc. debugging javascript.
javascript jquery html jquery-ui
No comments:
Post a Comment