mad5245

01-24-2012, 06: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">

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

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

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