JavaScript - Pace Calculator - What Worked And Didn't Work
Thanks to this forum, I finally got my calculator working and want to share it with everyone who can use it. The code below divides the time input by the distance input and displays the resulting pace in a min:sec format. Enter 12 miles, for example, and 1 hour, 33 minutes and 15 seconds, and the code displays 7:46 mpm (minutes per mile).
My first version uses one function to do everything, but this morning I decided to teach myself how one function passes stuff to another. So I began trying to perform the min:sec conversion in a function named Pace2minsec and pass the result to the Pace function for display in the form. After several failures, I learned that a function returns its calculation to whatever code calls it. Ah ha, I thought, I need to have Pace call Pace2minsec. Yeah, pretty basic stuff but I am a raw beginner with Javascript, and thought there might be others here like me who could benefit from my mistakes. Even after discovering the call-return process, I had to get the names of the variables correct before it would work. One mistake I made was thinking that I could have a variable with the same name in both functions. Wrong. Even though they were both inside their own function and therefore local variables, apparently, since one function called the other, the names had to be different. In both functions, I had a variable named totalsec, but only when I renamed it totalseconds in the first function did my code work. Another glich was discovering that I had to tell the second function what variable it had to use for its operation. My first stab at that was to put the line Pace2minsec(minsec) in the first function. Wrong. Then I tried Pace2minsec(totalsec). Wrong again. And finally, Pace2minsec(totalseconds) which worked fine. Probably obvious to most, but it sure wasn't to me. Trial and error scripting! But I'm getting there, one principle at a time... <CODE> <html> <head> <script> function Pace(D, H, M, S, form) // Is form really necessary? { var dist = parseFloat(D); // Makes entry a number? var hours = parseFloat(H); var mins = parseFloat(M); var secs = parseFloat(S); var pacedecimal = (hours*60 + mins + secs/60) / dist; // Total minutes in decimal var totalseconds = pacedecimal*60; // Total seconds in decimal form.pace.value =Pace2minsec(totalseconds) + " " + "mpm"; // Tell Pace2minsec what variable to use? } function Pace2minsec(totalsec) { var minsec = ''; sec = Math.round(totalsec%60); // remainder of totalsec div by 60 min = Math.round((totalsec-sec)/60); // total seconds minus remainder minsec = min + (sec>9?":":":0") + sec; // min:sec format adds :0 if sec<10 return(minsec); // Pass min:sec format to Pace, the calling function } </script> </head> <body style="margin-top:100px; text-align:center; font-family:arial; background-color:silver;"> <form name="pacer"> <table style="font-size:14px; font-weight:bold;" cellspacing="0" border="0"> <tr> <td>DIST</td> <td><input type="text" name="dist" size="3"></td> <td width="8"></td> <td>TIME</td> <td><input type="text" name="hours" size="1">:</td> <td><input type="text" name="mins" size="1">:</td> <td><input type="text" name="secs" size="1"></td> <td width="24"></td> <td><input TYPE="button" VALUE="Pace" onClick="Pace(this.form.dist.value, this.form.hours.value, this.form.mins.value, this.form.secs.value, this.form)"></td> <td width="4"></td> <td><input type="text" name="pace" size="8"></td> <td width="6"></td> <td><input TYPE="reset" VALUE="Clear" onClick="clearForm(this.form)"></td> </tr> </table> </form> </body> /html> </CODE> Similar TutorialsI got this code to WORK with Buttons... But, i can NOT get it to work with URLs/LINKs... dose anyone have any suggestions? The URL alternative LINKs are placed below the buttons... but like i have said, they don't work. Help Pleeeeese. Thanks. ****HEAD <script language="javascript" type="text/javascript"> function getCheckedValue() { document.getElementById("presentationsNavBars").style.display = 'block'; document.getElementById("proposalsNavBars").style.display = 'none'; document.getElementById("postingsNavBars").style.display = 'none'; document.getElementById("myaccountNavBars").style.display = 'none'; } function getCheckedValue2() { document.getElementById("presentationsNavBars").style.display = 'none'; document.getElementById("proposalsNavBars").style.display = 'block'; document.getElementById("postingsNavBars").style.display = 'none'; document.getElementById("myaccountNavBars").style.display = 'none'; } function getCheckedValue3() { document.getElementById("presentationsNavBars").style.display = 'none'; document.getElementById("proposalsNavBars").style.display = 'none'; document.getElementById("postingsNavBars").style.display = 'block'; document.getElementById("myaccountNavBars").style.display = 'none'; } function getCheckedValue4() { document.getElementById("presentationsNavBars").style.display = 'none'; document.getElementById("proposalsNavBars").style.display = 'none'; document.getElementById("postingsNavBars").style.display = 'none'; document.getElementById("myaccountNavBars").style.display = 'block'; } </script> ****** BODY <div class="student_text"> <asp:RadioButton ID="RadioButton1" GroupName="reg" Text="presentations" runat="server" OnClick="return getCheckedValue();" /> <br /> <%--OR how do i get it to work when using a URL as shown below for example--%> <a href="navPageTest2.aspx" runat="server" onclick="getClickedValue();">Presentations_link_ex</a><br /> </div> <br /><br /> <div class="student_text"> <asp:RadioButton ID="RadioButton2" GroupName="reg" Text="proposals" runat="server" onclick="return getCheckedValue2();" /> <br /> <%--OR how do i get it to work when using a URL as shown below for example--%> <a href="navPageTest2.aspx" onclick="getClickedValue2();">Proposals_link_ex</a><br /> </div> <br /><br /> <div class="student_text"> <asp:RadioButton ID="RadioButton3" GroupName="reg" Text="postings" runat="server" onclick="return getCheckedValue3();" /> <br /> <%--OR how do i get it to work when using a URL as shown below for example--%> <a href="navPageTest2.aspx" onclick="getClickedValue3();">Postings_link_ex</a><br /> </div> <br /><br /> <div class="student_text"> <asp:RadioButton ID="RadioButton4" GroupName="reg" Text="myaccount" runat="server" onclick="return getCheckedValue4();" /> <br /> <%--OR how do i get it to work when using a URL as shown below for example--%> <a href="navPageTest2.aspx" onclick="getClickedValue4();">Myaccount_link_ex</a><br /> </div> <br /><br /> ****************************** start display ***************************** <br /><br /> <div id="presentationsNavBars" style="display: none;"> SOME HTML HERE ..........presentations nav bar............ </div> <div id="proposalsNavBars" style="display: none;" > SOME HTML HERE 44444444 proposals nav bar 44444444444 </div> <div id="postingsNavBars" style="display: none;" > SOME HTML HERE 2222222 postings nav bar 2222222222222 </div> <div id="myaccountNavBars" style="display: block;" > SOME HTML HERE 33333333 myaccount nav bar 33333333 </div> <br /><br /> ****************************** end ***************************** already solved
It can be found right he http://arkdesigns.ca/AttilaKomaromiJavaCalculator.htm I have javascript enabled on my browsers but it still doesn't work. I see the calculator but pushing the buttons does nothing Any help is appreciated My code is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Javascript Calculator</title> <style> <!-- CSS STYLES GO HERE --> .container { width:500px; height:500px; } .equ { width:99%; height:20px; font-size:20px; text-align:right; margin-bottom:15px; } table { border:1px solid black; padding:5px; width:100%; } table td { margin:3px; text-align:center; width:20%; } .buttons { width:100%; height:50px; font-size:15px; } </style> <script type="text/javascript" src="javascript.js"> </script> </head> <body> <div class="container"> <table cellspacing="0"> <tr> <td colspan="5"><input class="equ" type="input" disabled="disabled" id="equation" value="0"/><input type="hidden" id="previousType" value="-1"/></td> </tr> <tr> <td><input class="buttons" type="button" name="sin" value="sin" onclick="solve ('sin')" /></td> <td><input class="buttons" type="button" name="cos" value="cos" onclick="solve ('cos')" /></td> <td><input class="buttons" type="button" name="tan" value="tan" onclick="solve('tan')" /></td> <td><input class="buttons" type="button" name="sqrt" value="√" onclick="solve('sqrt')" /></td> </tr> <tr> <td><input class="buttons" type="button" name="back" value="←" onclick="remove ();"/></td> <td colspan="2"><input class="buttons" type="button" name="erase" value="C" onclick="clear_equation ();" /></td> <td><input class="buttons" type="button" name="divide" value="/" onclick="equation (this.value, 1)"/></td> </tr> <tr> <td><input class="buttons" type="button" name="seven" value="7" onclick="equation (this.value, 2)"/></td> <td><input class="buttons" type="button" name="eight" value="8" onclick="equation (this.value, 2)"/></td> <td><input class="buttons" type="button" name="nine" value="9" onclick="equation (this.value, 2)"/></td> <td><input class="buttons" type="button" name="multiple" value="*" onclick="equation (this.value, 1)"/></td> </tr> <tr> <td><input class="buttons" type="button" name="four" value="4" onclick="equation (this.value, 2)"/></td> <td><input class="buttons" type="button" name="five" value="5" onclick="equation (this.value, 2)"/></td> <td><input class="buttons" type="button" name="six" value="6" onclick="equation (this.value, 2)"/></td> <td><input class="buttons" type="button" name="subtract" value="-" onclick="equation (this.value, 1)"/></td> </tr> <tr> <td><input class="buttons" type="button" name="one" value="1" onclick="equation (this.value, 2)"/></td> <td><input class="buttons" type="button" name="two" value="2" onclick="equation (this.value, 2)"/></td> <td><input class="buttons" type="button" name="three" value="3" onclick="equation (this.value, 2)"/></td> <td><input class="buttons" type="button" name="plus" value="+" onclick="equation (this.value, 1)"/></td> </tr> <tr> <td colspan="2"><input class="buttons" type="button" name="zero" value="0" onclick="equation (this.value, 2)"/></td> <td><input class="buttons" type="button" name="decimal" value="." onclick="equation (this.value, 3)"/></td> <td><input class="buttons" type="button" name="equal" value="=" onclick="solve ('');"/></td> </tr> </table> </div> </body> </html> I'm making a calculator with javascript inside of my html, but I can't figure out the right way to produce a working ^ sign. I've searched online for 4 hours now. Does anyone happen to know what I should type? Here's my code Code: <form name="Calc" style="position: fixed; top: 25px; right: 5px; background: #5F4A29;" action=""> <table border="6"> <tr> <td colspan="4"><input type="text" name="Input" size="25" /></td> </tr> <tr> <td><input class="button" type="button" value=" c " onclick="Calc.Input.value = ''" /></td> <td></td> <td></td> <td><input class="button" type="button" value=" = " onclick="Calc.Input.value = eval(Calc.Input.value)" /></td> <tr> </tr> <td></td> <td><input class="button" type="button" value=" ( " onclick="Calc.Input.value += '('" /></td> <td><input class="button" type="button" value=" ) " onclick="Calc.Input.value += ')'" /></td> <td><input class="button" type="button" value=" ^ " onclick="Calc.Input.value += '^(x,y)'" /></td> </tr> <tr> <td><input class="button" type="button" value=" 1 " onclick="Calc.Input.value += '1'" /></td> <td><input class="button" type="button" value=" 2 " onclick="Calc.Input.value += '2'" /></td> <td><input class="button" type="button" value=" 3 " onclick="Calc.Input.value += '3'" /></td> <td><input class="button" type="button" value=" + " onclick="Calc.Input.value += '+'" /></td> </tr> <tr> <td><input class="button" type="button" value=" 4 " onclick="Calc.Input.value += '4'" /></td> <td><input class="button" type="button" value=" 5 " onclick="Calc.Input.value += '5'" /></td> <td><input class="button" type="button" value=" 6 " onclick="Calc.Input.value += '6'" /></td> <td><input class="button" type="button" value=" - " onclick="Calc.Input.value += '-'" /></td> </tr> <tr> <td><input class="button" type="button" value=" 7 " onclick="Calc.Input.value += '7'" /></td> <td><input class="button" type="button" value=" 8 " onclick="Calc.Input.value += '8'" /></td> <td><input class="button" type="button" value=" 9 " onclick="Calc.Input.value += '9'" /></td> <td><input class="button" type="button" value=" * " onclick="Calc.Input.value += '*'" /></td> </tr> <tr> <td></td> <td><input class="button" type="button" value=" 0 " onclick="Calc.Input.value += '0'" /></td> <td><input class="button" type="button" value=" . " onclick="Calc.Input.value += '.'" /></td> <td><input class="button" type="button" value=" / " onclick="Calc.Input.value += '/'" /></td> </tr> </table> </form> This is a code for a simple calculator that requires the input of an Area and then calculates how many packs of product are then required to cover that area, rounding up to the next full pack, The results should be displayed in a simple HTML form but its not happening. I can't see any obvious errors. Am I missing something. Any help or ideas would be greatly appreciated. I might be making this more complicated than necessary. Thanks In the <HEAD> Code: <script> function packCalculation(){ if ( document.getElementById('coverage').value == '' ) { alert('You must enter a number') return false; } var coverage = parseFloat(document.getElementById('coverage').value); //declare coverage variable--> if (isNaN(coverage)) { alert('Please only enter numbers') return false; }; var coverage = parseFloat(document.getElementById('coverage').value); var packSize = parseFloat(document.getElementById('pack-size').innerHTML); var price = parseFloat(document.getElementById('price').value); var packNumFinal = coverage/packSize; <!--work out how many packs are needed--> var finalPrice = packNumFinal*price; <!--work out final price --> document.getElementById('packsNeeded').innerHTML = packNumFinal.ceil(); <!--round up to the next full pack--> document.getElementById('calcPrice').innerHTML = parseFloat(finalPrice).toFixed(2); <!--fix to 2 decimal points--> document.getElementById('results').className='show'; return false; } </script> Then in the <BODY> Code: <form id="packC"> <label>Enter Area to cover ( sq m ):</label> <input type="text" name="coverage" id="coverage" /> <p><span>Pack Coverage (sq m):</span> <span id="pack-size">1.982</span></p> <input type="hidden" name="price" id="price" value="<?php echo $priceFormat; ?>" /> <input type="button" value="Calculate" id="calculate" onclick="packCalculation()"/> <!-- results --> <span class="packs">Packs:</span> <div id="packsNeeded"></div><br/> <span class="cost">Total:</span> <div id="calcPrice"></div> </form> I solved the issue by completely removing the LINK, and simply adding the onclick function. thank you anyway. -------------------------------- I'm sorry if perhaps my first post was to confusing, I hope I can better describe what I'm trying to achieve here. Here's what's going on. When a link is 'clicked' such as Code: <a href="javascript:animatedcollapse.toggle('test')"> I expand and Collapse!</a> it will 'expand' and 'collapse' a DIV. The script works completely fine, unless I try to place a Code: <input type="button" value="myButtonValue" /> as the link, so I can submit the information through a php request. if I use an image, or text, it works fine, but I need to be able to use a button. You can see an example of a working and non-working 'collapsing and expanding DIV' if you Click Here. Is there another way around this? I'd even venture to use another form of 'expanding' and 'collapsing' JavaScript if anyone could provide... Thank you. im trying to make a calendar verification in javascript for client side registration page....but i stuck in "calendar function"....when i run the code without "calendar function" it works,,,,can anybody tells me wht am i doing wrong....the code is shown below <html> <head> <script type="text/JavaScript" language="javascript" > <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) { if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; } } else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); function calendar(day,month,year) { if(year%4==0) { if((month=="April")||(month=="June")||(month=="September")||(month=="November")) { if((day<0)||(day>30)) { alert("Invalid Date."); return false; } } if((month=="January")||(month=="March")||(month=="May")||(month=="July")||(month=="August")||(month= ="October")||(month=="December")) { if((day<0)||(day>31)) { alert("Invalid Date."); return false; } } if(month=="February") { if((day.value<0)||(day.value>29)) { alert("Invalid Date."); return false; } } return true; } else{ if((month=="April")||(month=="June")||(month=="September")||(month=="November")) { if((day<0)||(day>30)) { alert("Invalid Date."); return false; } } if((month=="January")||(month=="March")||(month=="May")||(month=="July")||(month=="August")||(month= ="October")||(month=="December")) { if((day<0)||(day>31)) { alert("Invalid Date."); return false; } } if((month=="February")) { if((day<0)||(day>28)) { alert("Invalid Date."); return false; } } return true; } function ValidateForm(){ var day = document.frmSample.Day; var year = document.frmSample.Year; var month = document.frmSample.Month; if ((day.value=="")||(day.value="Date")) { alert("Please enter your birthdate."); day.focus(); return false; } if ((month.value=="Month")||(month.value=="")) { alert("Choose Month."); month.focus(); return false; } if ((year.value=="Year")||(year.value=="")||(year.value<1950)||(year.value<2000)) { alert("Invalid Birth Year."); year.focus(); return false; } if(datcomb(day.value,month.value,year.value)==false) { alert("Wrong Combination of D-M-Y."); day.focus(); month.focus(); year.focus(); return false; } return true; } //--> </script> </head> <body> <form name="frmSample" method="post" onSubmit="return ValidateForm()"> <input type="text" name="Day" id="Day" value="Date" size="5" /> <select title="- Select Month -" style="font-size:12px" name="Month" id="Month" class=""> <option value="" selected="selected">Month</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <input type="text" name="Year" id="Year" size="5" value="Year" /> <br> <input type="submit" name="Submit" value="Submit"> </form> </body> </html> hye all, it's me again. i have a little bit confusion here. why is this alert "alert("Please answer the question.");" did not prompt out even if i don't select any of the radio button?can anyone help me? i appreciate if someone can help me.TQ. Here is the coding to return the radio buttons' value: Code: function getSelectedValue(flds) { var i = 0; var len = flds.length; while (i < len) { if (flds[i].checked) { return flds[i].value; } i++; } return ""; } Below is the coding to calculate the radio button value: Code: var bdpr=0,bdft=0,bdbs=0,prft=0,prbs=0,ftbs=0; var rank= new Array(); var form = document.forms.Calculator; var bdpr = Number( getSelectedValue(form.elements.a) ); var bdft = Number( getSelectedValue(form.elements.b) ); var bdbs = Number( getSelectedValue(form.elements.c) ); var prft = Number( getSelectedValue(form.elements.d) ); var prbs = Number( getSelectedValue(form.elements.e) ); var ftbs = Number( getSelectedValue(form.elements.f) ); if ( isNaN(bdpr)|| isNaN(bdft) || isNaN(bdbs) || isNaN(prft) || isNaN(prbs) || isNaN(ftbs)){ alert("Please answer the question."); } else{ brand=1+bdpr+bdft+bdbs; price=1+1/bdpr+prft+prbs; feature=1+1/bdft+1/prft+ftbs; basic=1+1/bdbs+1/prbs+1/ftbs; window.open("try.html"); } Code: <html> <head> <title>Variable - Examples 1</title> <script type="text/javascript"> function Student(firstName, lastName, email, courseID, titleArray, pointsArray){ this.firstName = firstName; this.lastName = lastName; this.email = email; this.courseID = courseID; this.title = titleArray; this.points = pointsArray; this.assign = this.points.slice(0,4); this.exams = this.points.slice(-2); this.assignments = function() { return task(this.title,this.points); } this.totalPoints = function() {return addExam(this.assign,this.exams); } this.finalGrade = calcGrade; } Student.prototype = { constructor : Student, toString : studentInfo }; //assign and exam doesn't seem to hold no values inside.. ??? function addExam(assign,exams){ var exams=this.exams; var high1=exams[0]; var high2=0; while(high2<exams.length){ high1=Math.max(high1,exams[high2]); high2++; } var sum = 0; for (var i=0; i < assign.length; i++){ sum += assign[i]; } return sum + high1; } var totalPoints = addExam(); function calcGrade(){ var grade; if (totalPoints >= 190){ return "A+"; }else if (totalPoints >= 180){ return "A"; }else if (totalPoints >= 175){ return "B+" }else if (totalPoints >= 170){ return "B"; }else if (totalPoints >= 165){ return "B-"; }else if (totalPoints >= 160){ return "C"; }else if (totalPoints >= 150){ return "D"; }else if (totalPoints < 150){ return "F"; } } function studentInfo(){ return "Student : " + this.lastName + "," + this.firstName + "<br>"+ "eMail : " + this.email + "<br>" + "Course ID : " + this.courseID + "<br>" + "--------------------------------" + "<br>" + this.assignments() + "--------------------------------" + "<br>" + "Total Points : " + this.totalPoints() + "<br>" + "Final Grade : " + this.finalGrade(); } function createStudents(){ var student1 = new Student("Jake", "Hennry", "jhennery@gmail.com","COIN-070B.01", ["Assignment1","Assignment2","Assignment3","Assignment4","Assignment5","MidTerm", "Final"], [25, 25, 28, 20, 29, 40, 40] ); alert("Student : " + student1.lastName + "," + student1.firstName + "\n"+ "eMail : " + student1.email + "\n" + "Course ID : " + student1.courseID + "\n" + "---------------------------------------" + "\n" + student1.assignments() + "\n" + "---------------------------------------" + "\n" + "Total Points : " + student1.totalPoints() + "\n" + "Final Grade : " + student1.finalGrade()); } var titleArray = ["Assignment1","Assignment2","Assignment3","Assignment4","Assignment5","MidTerm", "Final"]; var pointsArray = [30, 30, 28, 27, 29, 41, 45]; var student = new Student("Haripriyaa", "Ganesan", "haripriyaa@gmail.com","COIN-070B.01", titleArray, pointsArray ); </script> </head> <body> <script type="text/javascript"> document.writeln(student.toString()); </script> </body> </html> I have searched looking for a means to simply play a song using JavaScript and here is what I have found: Code: if (document.getElementById) var song = document.getElementById("media") else var song = document.all.tags("media") var playSong = "<a href='javascript:song.Play()'>a test<\/a>" document.write(playSong) Other JS sets the name and id of the song to "media". When I click on the written link nothing happens ... isn't the global function Play() built into Quicktime?? My community runs a set of forums, (phpbb with the Brushed Metal template, if that is important.) and people often use large images in their posts. This ends up cutting off the majority of the image, so we thought we'd install an auto-resize script, to resize anything wider than 600 px. It works too well, it also resizes the banner at the top of the screen. A bunch of us hacked at it trying to get it to work, but none of us know anything about javascript, so it's not going so well. Either the script still resizes everything, or it does nothing at all. Here's the earliest version I could find. It's not the original script, however... Code: <script> onload_functions.push('resizeimg();'); function resizeimg() { if (document.getElementsByTagName) { for (i=0; i<document.getElementsByTagName('img').length; i++) { im = document.getElementsByTagName('img')[i]; if (im.source == 'http://lalala.com/lalala/lalala.png') /*PATH TO TOP BANNER THAT SHOULD NOT BE RESIZED*/ { continue; } if (im.width > 600) { im.style.width = '600px'; eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + "','phpbbegypt ','fullscale','width=400,height=400,scrollbars=1,resizable=1'); pop.focus();\")"); eval("im.onclick = pop" + String(i) + ";"); if (document.all) im.style.cursor = 'hand'; if (!document.all) im.style.cursor = 'pointer'; im.title = 'Click Here To See Image Full Size '; } } } } </script> We're stuck, we have no idea what to do. Hi all. I'm having a bit of a problem returning a different value each time a different button is pressed for calculator. What am I doing wrong? Code: <script> function calc(btname){ for(var x=0;x<=11;x++){ if(x==0){ btname="zero"; }else if(x==1){ btname="one"; }else if(x==2){ btname="two"; }else if(x==3){ btname="three"; }else if(x==4){ btname="four"; }else if(x==5){ btname="five"; }else if(x==6){ btname="six"; }else if(x==7){ btname="seven"; }else if(x==8){ btname="eight"; }else if(x==9){ btname="nine"; }else if(x==10){ btname="multiply"; }else if(x==11){ btname="divide"; } if('document.forms.test.'+btname+'.onClick'){ alert(btname); } } } function scalc(){ var sign=""; var btname=""; document.write('<form name="test">'); for(var x=0;x<=11;x++){ if(x==0){ btname="zero"; }else if(x==1){ btname="one"; }else if(x==2){ btname="two"; }else if(x==3){ btname="three"; }else if(x==4){ btname="four"; }else if(x==5){ btname="five"; }else if(x==6){ btname="six"; }else if(x==7){ btname="seven"; }else if(x==8){ btname="eight"; }else if(x==9){ btname="nine"; }else if(x==10){ btname="multiply"; sign = "*"; }else if(x==11){ btname="divide"; sign = "/"; } if(x<10){ document.write('<input type="button" size="30" name="'+btname+'" value="'+x+'" onClick="calc(this);"> '); }else if(x>9 && x<12){ document.write('<input type="button" size="30" name="'+btname+'" value="'+sign+'" onClick="calc(this);"> '); } if(x==2 || x == 5 || x == 8){ document.write('<br>'); } } document.write('</form>'); } scalc(); </script> ANY help is GREATLY appreciated! I'm using the following code to calculate an age from the given date of birth however it works for some DOB's, gives wrong answers for some and undefined for others, can someone help me? Code: <div style="font-size:13px; font-family:Verdana;"> <script> <!-- /*Darren McGrady */ var current= new Date() var day = current.getDate() var month = current.getMonth() + 1 var year = current.getFullYear() var a = 29 var b = 12 var c = 1980 var age if (month < b) age = (year-c)-1 if ((month == b) && (day < a)) age = (year-c)-1 else age = year-c document.write(age); //--> </script> </div> Below is the code for a calculator using script. can one help me to explain me the colored line?? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> </body> <script language="javascript" type="text/javascript"> function multiply() { a=Number Quote: Quote: (document.calculator.number1.value) ; b=Number(document.calculator.number2.value); c=a*b; document.calculator.total.value=c; } function addition(){ a=Number(document.calculator.number1.value); b=Number(document.calculator.number2.value); c=a+b; document.calculator.total.value=c; } function subtraction(){ a=Number(document.calculator.number1.value); b=Number(document.calculator.number2.value); c=a-b; document.calculator.total.value=c; } function division(){ a=Number(document.calculator.number1.value); b=Number(document.calculator.number2.value); c=a/b; document.calculator.total.value=c; } function modulus(){ a=Number(document.calculator.number1.value); b=Number(document.calculator.number2.value); c=a%b; document.calculator.total.value=c; } </script> </head> <body> <form name="calculator"> Number 1: <input type="text" name="number1"> Number 2: <input type="text" name="number2"> Get Result: <input type="text" name="total"> <input type="button" value="ADD" onclick="javascript:addition();"> <input type="button" value="SUB" onclick="javascript:subtraction();"> <input type="button" value="MUL" onclick="javascript:multiply();"> <input type="button" value="DIV" onclick="javascript:division();"> <input type="button" value="MOD" onclick="javascript:modulus();"> </form> </body> </html> How could i make a calculator that changes three values when a vertex on an image moves. Example : When a point moves on the triangle it changes the cost quality and time. I have this start and need the meat for the concept to work.<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <p><img src="Assets/Project-triangle.svg.png" width="500" height="492" alt=""/>-------------------------------------------<img src="Assets/triangle.gif" width="224" height="210" alt=""/></p> <p> <label for="textfield">Cost :</label> <input type="text" name="textfield" id="textfield"> <label for="textfield2"> Time :</label> <input type="text" name="textfield2" id="textfield2"> <label for="textfield3">Quality :</label> <input type="text" name="textfield3" id="textfield3"> </p> <p> </p> </body> </html> Help would be greatly appreciated! Hi , this is my bmi calculator script <HEAD> <script type="text/javascript"> <!-- Begin script of spillo3000 function calculateBMI() { var weight = eval(document.form.weight.value) var height = eval(document.form.height.value) var height2 = height / 100 var BMI = weight / (height2 * height2) if(weight == "" || isNaN(weight) || height2 == "" || isNaN(height2)) { alert("inserisci un valore"); return; } else { document.form.BodyMassIndex.value=custRound(BMI,1); if(BMI < 18.5) { document.getElementById('feedback').innerHTML = 'Underweight '; }else if(BMI >=18.5 && BMI < 29.9) { document.getElementById('feedback').innerHTML = 'Normal '; }else if(BMI > 29.9) { document.getElementById('feedback').innerHTML = 'Overweight '; } } } function custRound(x,places) { return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places) } function resetAll(){ document.getElementById('feedback').innerHTML=""; return true; } // End --> </script> </HEAD> <!-- --> <BODY> <div align="left"> <form name="form" id="form"> <input type="Text" name="weight" size="4"> Peso (Kg)<br> <input type="Text" name="height" size="4"> Altezza (Cm)<br> <input type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI<br> <input type="Text" name="feedback" id="feedback" style="padding:10px 0 20px 0; border:none; font-weight:600; color:#555555; font-family:verdana;" ><br> <input type="button" style="font-size: 8pt" value="Calcola" onClick="calculateBMI()" name="button"> <input type="reset" style="font-size: 8pt" value="Reset" onclick="resetAll()" name="button"> </form> </div> <!-- Script Size: I would want to show writing that it says if is in overweight, norms or I underweigh, but the script does not work. could someone help me? please So after some studying I have a pretty decent method using objects. I built it so that you hit the first number, then you would hit a plus or minus then the second number. The problem is just getting the buttons to define variables and run functions. Quote: <html> <head> <script type="text/javascript" > x=10; h=1; var numbs = new Const(x) function Const(one){ this.x=one; ADD(this.x) if(h=1){ function ADD(a){ y=5; b=y+a; alert(b); }}} </script> </head> <body> <input type="button" value="1" onclick="needs to run all that AND set x=1 and h=1"> </body> </html> Also I plan on going back and making y, which is the second number you're adding, an object. For now I'm just setting it equal to something so I don't have to mess with it. I want the calculator to take what was clicked display the item number and also the cost. (if possible i'd like to be able to display cost with no button) sorry if the code is messy i'm new to javascript. Code: <SCRIPT TYPE="TEXT/JAVASCRIPT"> // Definitions var in2 = "" var in3 = "" //costs var $mat = "" var cmat = Number($mat) var $sqft = "" var csf = Number($sqft) var chngcost = cmat*csf var $coga = 30 var $cos = 40 var $coshp = 15 var $total = chngcost + $coga + $cos + $coshp // Add a letter to string function itemnumber2(numb) { in2 = numb document.myform.i2.value = in2 document.itemnumber.i2.value = in2 if (in2 == "10") { $mat = 3 document.myform.cmat1.value = $mat } if (in2 == "11") { $mat = 6 document.myform.cmat1.value = $mat } if (in2 == "12") { $mat = 12 document.myform.cmat1.value = $mat } } function itemnumber3(numb) { in3 = numb document.myform.i3.value = in3 document.itemnumber.i3.value = in3 if (in3 == "1") { $sqft = 7.5 document.myform.sqrf1.value = $sqft } if (in3 == "2") { $sqft = 5.5 document.myform.sqrf1.value = $sqft } if (in3 == "3") { $sqft = 5 document.myform.sqrf1.value = $sqft } } //total cost function function totalcost() { ttc1 = $total document.myform.ttc.value = ttc1 } </SCRIPT> Code: <input type="radio" id="10" name="Size" value="18x22" onclick="itemnumber2(10)"> 18" X 22"<br> <input type="radio" id="11" name="Size" value="24x36" onclick="itemnumber2(11)"> 24" X 36"<br> <input type="radio" id="12" name="Size" value="36x48" onclick="itemnumber2(12)"> 36" X 48"<br> Code: <input type="radio" id="1" name="Material" value="Photo Gloss" onclick="itemnumber3(1)"> Photo Gloss<br> <input type="radio" id="2" name="Material" value="Bond Laminate" onclick="itemnumber3(2)"> Bond Laminate<br> <input type="radio" id="3" name="Material" value="Photo Gloss" onclick="itemnumber3(3)"> Vinyl<br> Code: <form name="itemnumber" action="#"> <span class="style6">Item # <input type="text" size="3" name="i1" value="101" disabled>- <input type="text" size="2" name="i2" disabled>-<input type="text" size="1" name="i3" disabled></span></p> </form> Code: <input name="cost" type="button" onclick="totalcost()" value="Cost"> $<input type="text" size="5" name="ttc" disabled> I'm decent at JavaScript but I have no idea how I should go about making a calculator. So far I'll drop a bunch of buttons down that all onclick to a function (a,b) and then it will add or w/e then return. How would I incorporate multiple methods such as subtraction or multiplication though? Basically I'm confident I the ability to code or learn to make this calculator, just have no idea how to set this up, thanks. This is what I have so far, but now I am stuck. My instructor wants the output value (Number Set C) to include Number Set A and Number Set B. For instance, if Number Set A is "10" and you want to add Number Set B whose value is also "10", my instructor wants Number Set C to say "10 + 10 = 20". Where am I going wrong, and what is the easiest way I can make this work while making as little changes as possible? Most of the code is what my instructor requires us to use. Code: <HTML> <HEAD> <TITLE>COMSC-100-1241 - Assignment #8 - Introducing "if" Logic - Programming Your Own Calculator</TITLE> <SCRIPT LANGUAGE="text/JavaScript"> function Go(code){ var a var b var c var x a = parseFloat(document.getElementById("a").value); b = parseFloat(document.getElementById("b").value); if (code == 0){ x = a + b c = a + " + " + b + " = " + x } if (code == 1){ x = a - b c = a + " - " + b + " = " + x } if (code == 2){ x = a * b c = a + " * " + b + " = " + x } if (code == 3){ x = a / b c = a + " / " + b + " = " + x } document.getElementById("c").value = c; } </SCRIPT> </HEAD> <BODY> <TABLE BORDER="1" WIDTH="500" ALIGN="center"> <TR> <TD> <DIV ALIGN="left"> <FORM NAME="calculator"> <B>Instructions: </B> Type a number in the box for "Number Set #1". Then input a <I>second</I> number in the box for "Number Set #2". Click the "Calculate" button, and the sum of those two numbers will appear in the box for "Number Set #3". <BR> <BR> <B>Input Values: </B> <BR> <B>Number Set A:</B> <INPUT ID="a"> <BR><BR> <B>Number Set B:</B> <INPUT ID="b" > <BR><BR> <INPUT TYPE="Submit" VALUE="Add" OnClick="Go(0);"> <INPUT TYPE="Submit" VALUE="Subtract" OnClick="Go(1);"> <INPUT TYPE="Submit" VALUE="Multiply" OnClick="Go(2);"> <INPUT TYPE="Submit" VALUE="Divide" OnClick="Go(3);"> <BR><BR> <B>Output Value: </B> <BR> <B>Number Set C:</B> <INPUT ID="c" SIZE="50"> </FORM> </DIV> </FORM> </TD> </TR> </TABLE> </BODY> </HTML> |