Simple JavaScript

programming web dev
1

Hey Kirupans!

I have a question about some JavaScript. I’m trying to make a very very simple calculator. The user enters a number, it processes an equation, then BOOM! They get an answer.

It all takes place in one form. Here’s a link to the simple page: http://www.wirelessinteractive.com/calculator.html

Now the JavaScript looks like this:

function lmr100(calc){
var FMHz = calc.FMHz.value;
 
var sFMHz = Math.sqrt(FMHz);
var atten = (0.70914) * (sFMHz) + (0.00174) * (FMHz);

calc.atten.value = atten;
return false;
}

And my form looks like this:

<form name="calc" id="calc" action="#">
<table align="center" border="1">
<tr>
 <td align="right">FMHz: </td>
 <td align="left"><input name="FMHz" type="text" id="FMHz" size="5" /> </td>
 </tr>
 <tr>
 <td colspan="2" align="center">
  <input type="button" value="Calculate" onClick="lmr100()"/></td></tr>
  <tr>
    <td align="right">Attenuation:</td>
    <td alig="left"><input name="atten" type="text" id="atten" size="5" readonly="readonly" /></td></tr>
</table>
</form>

Again, all very simple. Yet for some reason, when click on that button, I get an error that says “form” is undefined. Am I missing something?

2

Hmm… Ok, I feel like a bonehead… I needed to change:

onClick="lmr100()"

to this:

onClick="lmr100(calc)"
3

Ok, so here’s a new question. I’ve got a drop down menu on the form. I’d like to run a different function depending on the value of the drop down menu. Is that possible?

Here’s the link again: http://www.wirelessinteractive.com/calculator.html

4

Sure it’s possible. Just taking a brief look at your page you could do something like…

When the button is clicked for calculate you call the function lmr100(calc). In that function check the value of the drop down menu. Depending on that value, select the function that you want to use for the calculation…

Here’s just a simple example:

<!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" lang="en" xml:lang="en">
 <head>
  <title> </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script type="text/javascript">
   function doMath(){
     var num1 = document.sampleForm.number1.value - 0;
     var num2 = document.sampleForm.number2.value - 0;
     var mFunc = document.sampleForm.mathFunction.value;
     var theAnswer = 0;

     switch(mFunc){
       case "sub": theAnswer = num1 - num2; break;
       case "mul": theAnswer = num1 * num2; break;
       case "div": theAnswer = num1 / num2; break
       default: theAnswer = num1 + num2; break;
     }

     document.sampleForm.answer.value = theAnswer;

   }
  </script>

  <style type="text/css">
   #math{ width: 400px; text-align: right; }
  </style>

 </head>
 <body>

  <div id="math">
   <form name="sampleForm">
    Number 1: <input type="text" name="number1" value="" /> <br />
    <select name="mathFunction">
     <option value="add" selected="selected"> + </option>
     <option value="sub"> - </option>
     <option value="mul"> * </option>
     <option value="div"> / </option>
    </select> <br />
    Number 2: <input type="text" name="number2" value="" /> <br />
    Answer: <input type="text" name="answer" value="" /> <br />
    <input type="button" value="Calculate" onclick="doMath()" />
   </form>
  </div>

 </body>
</html>

There aren’t any checks in there to make sure the values being input are numerical, but that should be done to prevent errors. A simple regular expression test could look for number characters and the . and - (for decimal values and negative values).