...

View Full Version : Resolved Need Help with simple JavaScript calculator. (First time with JS)

01-24-2012, 07:55 PM
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.

//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.

<!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">

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript" src="Calculate.js">
</script>

<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>
</tr>

<tr>
<td align="right">Vpp:</td>
<td alig="left">
</tr>

<tr>
<td align="right">Vrms:</td>
<td alig="left">
</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!

Old Pedant
01-24-2012, 10:54 PM
???

The first line of your function is
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.

Old Pedant
01-24-2012, 11:03 PM
I *think* what you want is this:

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.

01-25-2012, 08:55 PM
So I changed my javascript to this

//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.

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

Old Pedant
01-25-2012, 09:13 PM
Why did you change this code:

calc.Vpp2.value = Vpp2;
calc.Vrms2.value = Vrms2;
calc.dBm2.value = dBm2;

to this:

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?