View Full Version : trying to eval a math entry in a text field

12-28-2005, 10:36 PM

I am trying to do simple math equations in a text field and then have the answer put into a different text field. I was following a "simple tutorial" but i think that some of the code was left out. Here is what I have:

<form name="example">
<input type="text" size="20" name="calculator">
<input type="button" name="Calc" value="Calulate" onclick="value()">
<input type="reset" name="rest" value="Reset">
<br>Answer:<input type="text" size="20" name="answer">

<script type="text/javascript">
function value()
document.example.answer.value = eval(document.example.calculator.value)

When I press the button nothing happens and my page displays "Error on Page" in the bottom left of the page. Can someone suggest what I may be missing? Or perhaps where I could look up the eval function that the tutorial uses? Does it matter if the form is created before the script stuff? Perhaps my onClick event is not recognizing the value() function because the script code is created afterwards.

12-28-2005, 11:03 PM
I did some more debugging and found the problem. It seems that it did not like the function name i was using of value(). I guess that I will need to be careful of reserved words. :D

Perhaps someone has a better suggestion on how i could do this?

12-29-2005, 10:23 AM
1. Yes, value is a reserved word. Avoid using reserved javascript words when naming functions or variables. simplu chanhe the name of that function. myValue(), for instance. Keep in mind that javascript is case sensitive.

2. You don't need to evaluate a value when asign it. Simply assign the value

document.example.answer.value = document.example.calculator.value

and, anyway, avoid using eval() function. It is not trusty and it might slower the CPU. There are always other methods (square brackets notation, for instance) to use instead.

3. don't forget that, with few exception (offset position/size), all the elements' attributes return strings as values. So that if you need a math substraction/adding you must first transform them into numbers. Number() method is one way.

12-30-2005, 10:35 PM
Kor's warnings about using the eval function are good to heed for most purposes... However, in this example, I think you would need to use eval...

For example, if calculator.value="2+2", using Kor's example of just setting the .value attributes equal to each other would result in answer.value="2+2" whereas if you had:

document.example.answer.value = eval(document.example.calculator.value);
then answer.value="4";

Where Kor's warnings come into play is when the user may type in a number and the js code uses that number as a part of a variable name. For example, let's say you had some shopping-cart script that allowed the user to delete a particular line-item by having the user type in the corresponding number:

Item # Item Description Price
1 Apple $0.30
2 Bananna $0.15
3 Steak $5.50
4 Cherry $0.50

Enter Item to Delete: 3

Inside the code, the programmer may have written something like:

// In the HTML:
<form name="myShoppingCart">
<tr name="Heading"
<td>Item #</td>
<td>Item Description</td>
<tr name="Item1">
Enter Item to Delete:&nbsp;<input type="text" name="delItemNumber" onchange="deleteItem">

// In javascript
function deleteItem()

Because eval() is slow (and you are not actually needing any mathematical operation performed), it would've been better to write the function in bracket notation than to use eval():

function deleteItem()

An even better solution would be to use DOM methods, which use an element's id property instead of its name in order to address specific elements:

function deleteItem()

Notice how the last example was able to address specific items from the document without having to drill-down through the form in order to get there...

01-03-2006, 09:50 AM
For example, if calculator.value="2+2", using Kor's example of just setting the .value attributes equal to each other would result in answer.value="2+2" whereas if you had:

Even in this case you may use other methods than eval(). For instance Number()

document.example.answer.value = Number(document.example.calculator.value);

01-03-2006, 03:36 PM
I disagree. This test code shows the difference:

<title>Eval vs. Number Example</title>
function calcQuestion()
Question Textbox: <input type="text" id="question" /><br />
Answer Textbox (using Number): <input type="text" id="answerNum" /><br />
Answer Textbox (using eval): <input type="text" id="answerEval" /><br />
<input type="button" value=" Calculate " onclick="calcQuestion();" />
If you type in "2+2" into the "question" textbox and click on the button, you'll get "NaN" for Number() but will get the correct answer ("4") in the eval's answer textbox (tested in both IE and FF).

Along these lines, however, notice that in my "shopping cart" example in my earlier post, I never changed the "Item to delete" textbox value to a number. If for some reason you did need to use the .value as a number, then you will (or should) use the Number() method to convert it to a number first.

01-03-2006, 04:04 PM
I see what you mean. Yet i strongly belive that always there are ways, html or javascript, to avoid eval(). For instance, why afford user to type 2+2? Let the code to do the add....