Enjoy an ad free experience by logging in. Not a member yet? Register.

Results 1 to 6 of 6

01242012, 06:55 PM #1
 Join Date
 Jul 2011
 Location
 Pa
 Posts
 7
 Thanks
 1
 Thanked 0 Times in 0 Posts
Need Help with simple JavaScript calculator. (First time with JS)
I am trying to make a simple calculator to calculate dBm, Vpp, Vrms. It is basically a conversion calculator. I am brand new to JavaScript and tried to follow a tutorial but I'm coming up short. I will post both my .js and .html code below.
My issue is that when I hit the "Calculate" button nothing happens.
Here is the javascript. It has a main calculate function and a function that gives me a log base 10 method.
Code://Main Calculation function calculate() { if(dBm === null && Vpp === null){ var calc = document.getElementById('ecalc'); var Vpp2 = (4*Vrms)/Math.sqrt(2); var dBm2 = 20 * (log10(Vpp/(Math.sqrt(0.008*Z)))); var Vrms2 = Vrms; return false; } else if(Vpp === null && Vrms === null){ var calc = document.getElementById('ecalc'); var Vpp2 = Math.sqrt(0.008*Z)*Math.pow(10,(dBm/20)); var Vrms2 = (Math.sqrt(2)/2)*(Vpp/2); var dBm2 = dBm; return false; } else if(dBm === null && Vrms === null){ var calc = document.getElementById('ecalc'); var dBm2 = 20 * (log10(Vpp/(Math.sqrt(0.008*Z)))); var Vrms2 = (Math.sqrt(2)/2)*(Vpp/2); var Vpp2 = Vpp; return false; } calc.Vpp2.value = Vpp2; calc.Vrms2.value = Vrms2; calc.dBm2.value = dBm2; return false; } //Log base 10 Function function log10(val) { return Math.log(val) / Math.log(10); }
Code:<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf8" httpequiv="ContentType" /> <title>Untitled 1</title> <script type="text/javascript" src="Calculate.js"> </script> </head> <body> <form id="ecalc" action="#"> <table align="center"border="1"> <tr> <td colspan="2" align="center"> Enter a Z value and one other value. </td> </tr> <tr> <td align="right">dBm: </td> <td align="left"><input type="text" name="dBm" size="20" /></td> </tr> <tr> <td align="right">Vpp: </td> <td align="left"><input type="text" name="Vpp" size="20" /></td> </tr> <tr> <td align="right">Vrms: </td> <td align="left"><input type="text" name="Vrms" size="20" /></td> </tr> <tr> <td align="right">Z (Ohms): </td> <td align="left"><input type="text" name="Z" size="20" value="50" /></td> </tr> <tr> <td colspan="2" align="center"> <input type="button" value="Calculate" onclick= "calculate();" /> </td> </tr> <tr> <td align="right">dBm:</td> <td alig="left"><input type="text" name="dBm2" size="20" readonly="readonly" /></td> </tr> <tr> <td align="right">Vpp:</td> <td alig="left"> <input type="text" name="Vpp2" size="20" readonly="readonly" /></td> </tr> <tr> <td align="right">Vrms:</td> <td alig="left"> <input type="text" name="Vrms2" size="20" readonly="readonly" /></td> </tr> </table> </form> </body> </html>
Last edited by mad5245; 01252012 at 08:44 PM.
01242012, 09:54 PM
#2
???
The first line of your function isbut no place have you defined either dBm or VppCode:if(dBm === null && Vpp === null){
So immediately you get a JavaScript error.
No, the fact that you have <input>s with those field names has no bearing. Those are *NOT* JavaScript variables, so they are invisible to JS.
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
01242012, 10:03 PM
#3
I *think* what you want is this:
(1) Don't declare the Vpp2, dBm2, Vrms2 variables more than once.Code:function calculate() { var calc = document.getElementById('ecalc'); var dBm = calc.dBm.value; var Vpp = calc.Vpp.value; var Vpp2, dBm2, Vrms2; if( dBm != "" && Vpp != "" ){ Vpp2 = (4*Vrms)/Math.sqrt(2); dBm2 = 20 * (log10(Vpp/(Math.sqrt(0.008*Z)))); Vrms2 = Vrms; } else if ( ... ) {
(2) Form field values are *NEVER* null. NEVER. They are always a string. So you want to look for empty strings, instead of null.
(3) When you do return, the function returns RIGHT THEN AND THERE and NO MORE LINES in the function are executed. At all.
So do *NOT* return until you have the new values in place on the form.
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
01252012, 07:55 PM
#4
 Join Date
 Jul 2011
 Location
 Pa
 Posts
 7
 Thanks
 1
 Thanked 0 Times in 0 Posts
So I changed my javascript to this
It still wont work. The fields are not populating and I'm not even sure if the calculations are running. I did not edit the HTML. could it be something with that? When I click "calculate", nothing happens. Please Help! I am brand new at this and I feel like I am over thinking it.Code://Main Calculation function calculate() { var calc = document.getElementById('ecalc'); var dBm = calc.dBm.value; var Vpp = calc.Vpp.value; var Vrms= calc.Vrms.value; var Vpp2, dBm2, Vrms2; if(dBm === "" && Vpp === ""){ var Vpp2 = (4*Vrms)/Math.sqrt(2); var dBm2 = 20 * (log10(Vpp2/(Math.sqrt(0.008*Z)))); var Vrms2 = Vrms; } else if(Vpp === "" && Vrms === ""){ var Vpp2 = Math.sqrt(0.008*Z)*Math.pow(10,(dBm/20)); var Vrms2 = (Math.sqrt(2)/2)*(Vpp2/2); var dBm2 = dBm; } else if(dBm === "" && Vrms === ""){ var dBm2 = 20 * (log10(Vpp/(Math.sqrt(0.008*Z)))); var Vrms2 = (Math.sqrt(2)/2)*(Vpp/2); var Vpp2 = Vpp; } var calc2 = document.getElementById('ecalc'); calc2.dBm2.value; calc2.Vpp2.value; calc2.Vrms2.value; return false; } //Log base 10 Function function log10(val) { return Math.log(val) / Math.log(10); }
Thank you in advance!
P.S. I know the equations are correct because I tested it without the functions and html before moving on.
01252012, 08:13 PM
#5
Why did you change this code:
to this:Code:calc.Vpp2.value = Vpp2; calc.Vrms2.value = Vrms2; calc.dBm2.value = dBm2;
??????Code:var calc2 = document.getElementById('ecalc'); calc2.dBm2.value; calc2.Vpp2.value; calc2.Vrms2.value;
Your new code is utterly bogus. You aren't storing ANY values back into the display.
Also: You might want to use == instead of === when doing those comparisions. I'm not 100% sure the types *are* the same. They probably are, but why take a chance?
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
01252012, 08:43 PM
#6
 Join Date
 Jul 2011
 Location
 Pa
 Posts
 7
 Thanks
 1
 Thanked 0 Times in 0 Posts
Sorry. I must have changed this is a desperate attempt to get this thing to work. I don't know why I did it but your way is definitely the right way. I figured out the problem. I never read in the var Z which is in the calculations. It is working like I want now. Thanks for the help.