eval function does not work correctly in JavaScript

Question

I am new in JavaScript & I am creating a simple calculator.

But I have some problems with the eval() function.

My script:

function calc(fld){
    var firstNo = 0 ;
    var secNo   = 0 ;
    var num = fld.name.charAt(2);
    var op  = fld.name.charAt(0);

    if(op == "t"){op = "-";}
    else if(op == "z"){op = "*";}
    else if(op == "e"){op = "=";}
    else if(op == "j"){op = "+";}
    else if(op == "d"){op = "/";}
    else { op ="";}

    if (op != "=") {eval("document.calc1.res").value  += num +  op ;}
    else { 
        // This line doesn't work correctly
        document.calc1.res.value = eval("document.calc1.res.value") ;
        // nor this one
        // document.calc1.res.value = eval("document.calc1.res").value ;    
    }

And this is the HTML:

<form id="calc" name="calc1" method="post">
        <input type="text" name="res" id="res"><br />
        <input type="button" value="7" id="no7"  name="no7" onclick="calc(this)"></input type="button" value=""><input type="button" value="8" id="no8" name="no8" onclick="calc(this)"></input type="button" value=""><input type="button" value="9" id="no9" name="no9" onclick="calc(this)"></input type="button" value=""><br />
        <input type="button" value="4" id="no4" name="no4" onclick="calc(this)"></input type="button" value=""><input type="button" value="5" id="no5" name="no5" onclick="calc(this)"></input type="button" value=""><input type="button" value="6" id="no6" name="no6" onclick="calc(this)"></input type="button" value=""><br />
        <input type="button" value="1" id="no1" name="no1" onclick="calc(this)"></input type="button" value=""><input type="button" value="2" id="no2" name="no2" onclick="calc(this)"></input type="button" value=""><input type="button" value="3" id="no3" name="no3" onclick="calc(this)"></input type="button" value=""><br />
        <input type="button" value="-" id="no1" name="t" onclick="calc(this)">
        <input type="button" value="*" id="no1" name="z" onclick="calc(this)">
        <input type="button" value="=" id="no1" name="e" onclick="calc(this)">
            <!--This line works correctly-->
        <INPUT TYPE="button" NAME="DoIt"  VALUE="  =  " OnClick="document.calc1.res.value = eval(document.calc1.res.value)">
        <input type="button" value="/" id="no1" name="d" onclick="calc(this)">
        <input type="button" value="+" id="no1" name="j" onclick="calc(this)">


    </form>

In HTML code there is two equal signs. My problem is there.

When I wanted to evaluate expression in the JS file it did not work, but it was working in HTML file. I mentioned lines with comments.

What are differences between these lines?

TIP: Avoid the use of `eval()` at all costs. http://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea — emerson.marini, Jun 26 '14 at 12:26
@RGraham as I said, I am new in js. I google simple calculator and all of them used **eval()**! Why I should not use this function? — Amir, Jun 26 '14 at 12:29
im not sure, but isnt 'calc1' supposed to be the id for it to be accessed like you do? — Banana, Jun 26 '14 at 12:29
you shouldnt use eval because if you do `eval(a)` and get the `a` from user input, and he accidentally inputs `a = malicious script to destroy the matrix` , it will result in `eval(malicious script to destroy the matrix)` — Banana, Jun 26 '14 at 12:31
@Banana So, How should I eval/execute like **eval()** without this function? — Amir, Jun 26 '14 at 12:35
Don't avoid `eval` at all costs. That's nonsense. Be careful with it, understand it, then use it to great effect. — Carl Smith, Jun 26 '14 at 12:38
@Banana If the user wants to input arbitrary code, they open Dev Tools?? — Carl Smith, Jun 26 '14 at 12:39
@CarlSmith thats why i said 'accidentally'. eval()'s behaviour can be unpredictable, and of course he can use it and probably as a beginner he should test it out, but i would avoid it beyond testing. — Banana, Jun 26 '14 at 12:41

score 0 · Answer 1 · answered Jun 26 '14 at 12:47

1.) DON'T USE eval()! You don't need to.

2.) To get all of the forms in a document, do [document].forms. Then put .calc1 to get a specific form by name then put .res to get a specific field by name.

function calc(num1Elem, opElem, num2Elem){
    var num1 = parseInt(num1Elem.value, 10);
    if (num2Elem) var num2 = parseInt(num2Elem.value, 10);
    var op = opElem.value;
    var num;
    if(op == "-") num = num1-num2;
    else if(op == "*") num = num1*num2;
    else if(op == "=") num = num1;
    else if(op == "+") num = num1+num2;
    else if(op == "/") num = num1/num2;
    else op ="";
    if (op != "") {
        document.forms.calc1.res.value = num;
        //Do NOT use eval():
        // document.forms.calc1.res.value = eval(num1+op+num2);
        // This won't even work if we use the = sign.
    }
    //The else loop just sets something equal to what it already is, so it's not doing anything, so we can omit it.
}

//Type in one of these lines of code and sees what happens now!
calc(document.forms.calc1.no8, document.forms.calc1.e, document.forms.calc1.no7)
calc(document.forms.calc1.no8, document.forms.calc1.j, document.forms.calc1.no7)
calc(document.forms.calc1.no8, document.forms.calc1.t, document.forms.calc1.no7)
calc(document.forms.calc1.no8, document.forms.calc1.z, document.forms.calc1.no7)
calc(document.forms.calc1.no8, document.forms.calc1.d, document.forms.calc1.no7)

eval function does not work correctly in JavaScript

1 Answers1