1

I need help with a basic text input field calculator. Where if someone puts 1+1 etc. It will answer the problem in another text input field but I can not figure out how to with my code below any help would be appreciated.

function Cal() {
var Num = parseInt(document.getElementById("Numbers").value);
var One = Num;
alert(One);

I only have it where it notifys me the answer.

CDW
  • 33
  • 5

3 Answers3

3

If you want to avoid using eval then you can use a library like mathjs, or roll your own.

An example of it in use, loaded using requirejs.

HTML

<input id="expression" type="text"></input>
<div id="result">0</div>

Javascript

require.config({
    paths: {
        mathjs: 'https://raw.github.com/josdejong/mathjs/master/dist/math.min',
    }
});

require(['mathjs'], function (mathjs) {
    var math = mathjs(),
        expression = document.getElementById('expression'),
        result = document.getElementById('result');

    expression.addEventListener('change', function (e) {
        result.textContent = math.eval(e.target.value);
    }, false);
});

On jsFiddle

Xotic750
  • 22,914
  • 8
  • 57
  • 79
2

You could either write a parser, or use eval, presuming they input valid JavaScript arithmetic. This is one of the few cases where it is entirely reasonable to use eval, but you still will need to sanitise their inputs.

phenomnomnominal
  • 5,427
  • 1
  • 30
  • 48
  • 1
    But I heard that using eval is bad. – CDW Mar 02 '14 at 02:28
  • 2
    @CDW: Guns are bad too, but if you are using them for hunting, they are OK. Context matters. – Felix Kling Mar 02 '14 at 02:31
  • +1. Really doing eval on value that user *just typed in* is fine (user can as well click F12 and run the same script with dev tools). The issue is when (always :) ) you don't know where the value come in. I.e. what user got mail "paste this string XXXXXXXX and click Calculate" instead of typing themselves? Unfortunately sanitizing input is almost as hard as parsing math expression and you may just write/find expression parser instead. Check http://stackoverflow.com/questions/1052470/javascript-parser-for-simple-expression (and similar questions) for links. – Alexei Levenkov Mar 02 '14 at 02:39
  • How do you know if the user is not typing in a javascript instead of what is expected? – Gaurav Karwal Mar 02 '14 at 03:27
0

You can use eval in this situation... something like this could work:

function calculateInput(userInput) {
    return eval(string);
}

var userInput = document.getElementById("Numbers").value;

var result = calculateInput(userInput);
alert(result);

http://jsfiddle.net/4c6tS/1/

c0deNinja
  • 3,956
  • 1
  • 29
  • 45