Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    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);
    }
    Here is the HTML. It has the form in it. As you can see there are 4 inputs. Z is required and only one of the other values can be entered (hence the if statements in the js.

    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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <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>
    There is probably something simple that needs to be fixed but I have spent a whole day trying to figure this out. If anyone has any comments please let me know. Thanks in advance!
    Last edited by mad5245; 01-25-2012 at 08:44 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    ???

    The first line of your function is
    Code:
        if(dBm === null && Vpp === null){
    but no place have you defined either dBm or Vpp

    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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I *think* what you want is this:
    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 ( ... ) {
    (1) Don't declare the Vpp2, dBm2, Vrms2 variables more than once.
    (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.

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Pa
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So I changed my javascript to this

    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);
    }
    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.
    Thank you in advance!

    P.S. I know the equations are correct because I tested it without the functions and html before moving on.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Why did you change this code:
    Code:
        calc.Vpp2.value = Vpp2;
        calc.Vrms2.value = Vrms2;
        calc.dBm2.value = dBm2;
    to this:
    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.

  • #6
    New to the CF scene
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •