Is there a way to evaluate strings as mathematical expressions in HTML/JS?

Question

So I have this bit of code for a calculator and it when I put something in the textbox, it only shows undefined. I need it when I put a mathematical expression like 1+1 it will show 2. You can see it in action in my website: G1blue.github.io/gencal.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Calculator: General (Under maintenance)</title>
        <style>
            h1{
                font-size: 100px;
                margin: auto;

            }
            div {
                font-size: 100px;
                position: absolute;
                top: 150px;
            }

        </style>
    </head>
    <button><a href="index.html">Go to home</a></button>
    <body>
     <h1>Calculator: General</h1>
     <input oninput="varChange()" id="equation" type="number">
     <div id="answer"></div>
     <script>
       function varChange(){
        var equation = document.getElementById("equation").value;
        var answer = document.getElementById("answer");
        answer.innerHTML = new Function(equation)()
       }
       
       
       
     </script>
    </body>
</html>

How do you fix this?

Hao Wu · Accepted Answer · 2021-09-02 01:30:26Z

2

The function you're in need of is eval().

eval('1+1');
// Output: 2

Or implemented in your code that would be:

var equation = document.getElementById("equation").value;
var answer = document.getElementById("answer");
answer.innerHTML = eval(equation);

For more on the eval() function, read the documentation.

edited Sep 2, 2021 at 1:30

Hao Wu

21.6k7 gold badges37 silver badges79 bronze badges

answered Sep 2, 2021 at 1:23

davidroseboom

19710 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

davidroseboom Over a year ago

No problem. If you found this answer helpful, please consider marking it as an accepted answer!

Kenneth Lew Over a year ago

Using eval is very dangerous, because this makes the site trivially easy to conduct XSS attacks on. I personally would recommend building a parser instead, which gives much more freedom. However, if you insist on eval, you should consider using a library such as validator to sanitize strings.

davidroseboom Over a year ago

@KennethLew is right. From a security point of view I would not recommend eval()...

G1blue Over a year ago

What are alternatives to eval()?

davidroseboom Over a year ago

For alternatives to eval() have a look into this question.

lmonninger · Accepted Answer · 2021-09-02 03:03:27Z

0

As noted, eval is not very secure. It'd be easy to say, "hey, it's on the client so what do I care." And, you might be right. But, depending on your exact use case, you could be opening your users up to cookie theft and all sorts of undesirable things.

If you really need to do this in production, you'll likely want to use a sandbox with Node. VM2 should give you what you need.

answered Sep 2, 2021 at 3:03

lmonninger

1,0117 silver badges25 bronze badges

Collectives™ on Stack Overflow

Is there a way to evaluate strings as mathematical expressions in HTML/JS?

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related