Is there an alternative way i can make this calculator work without the eval function?

Question

I cant seem to think how i could do it without it being overly complicated. I know i would need to create an array and loop through it and find operators (x & /) and it would also be nice to have BEDMAS implemented.

<div class="display"><input type="text" size="36" id="display" readonly></div>
<div class="keys">

    <p>
        <input type="button" class="button" value="CE" onclick='backspace()'>
        <input type="button" class="button" value="x^2" onclick='power()'>
        <input type="button" class="button" value="%"  onclick='percentage("%")'>
        <input type="button" class="button" value="/" onclick='math("/")'>
    </p>

    <p>
        <input type="button" class="button" value="7" onclick='math("7")'>
        <input type="button" class="button" value="8" onclick='math("8")'>
        <input type="button" class="button" value="9" onclick='math("9")'>
        <input type="button" class="button" value="x" onclick='math("*")'>
    </p>

    <p>
        <input type="button" class="button" value="4" onclick='math("4")'>
        <input type="button" class="button" value="5" onclick='math("5")'>
        <input type="button" class="button" value="6" onclick='math("6")'>
        <input type="button" class="button" value="-" onclick='math("-")'>
    </p>
    <p>
        <input type="button" class="button" value="1" onclick='math("1")'>
        <input type="button" class="button" value="2" onclick='math("2")'>
        <input type="button" class="button" value="3" onclick='math("3")'>
        <input type="button" class="button" value="+" onclick='math("+")'>
    </p>

    <p>
        <input type="button" class="button" value="0" onclick='math("0")'>
        <input type="button" class="button" value="." onclick='math(".")'>
        <input type="button" class="button" value="C" onclick='c("")'>
        <input type="button" class="button" value="=" onclick='e()'>
    </p>



function c(val){
document.getElementById("display").value = val;
}
function math(val){
document.getElementById("display").value += val;
}
function e(){
try{
    c(eval(document.getElementById("display").value))
}
catch(e){
c('Error')
}
}
function backspace() {
var value = document.getElementById("display").value    
document.getElementById("display").value = value.substring(0, value.length 
-1);
}
function power() {
var value = document.getElementById("display").value;
var value = document.getElementById("display").value = (value * value);
}
function percentage() {
var value = document.getElementById("display").value;
var value = document.getElementById("display").value = (value / 100);
}

`eval` is not evil, just commonly referred to that way. You have no inputs for parentheses, so you need to add them if you want BEDMAS support. Then use `eval` _on input built from keypad clicks, making sure there is no ability to paste an arbitrary string into `display.value` for evaluation._ — traktor, May 23 '17 at 03:24
See https://stackoverflow.com/questions/32982719/chrome-app-doing-maths-from-a-string/ — guest271314, May 23 '17 at 03:25

score 1 · Answer 1 · answered May 23 '17 at 03:06

1

Yes! Don't reinvent this. Use something like math.js which has an expression parser built-in.

math.eval(/* put your concatenated expression here */)

answered May 23 '17 at 03:06

Brad

159,648
54
349
530

Wait, are you answering the question "how to do this without the eval function" with "Yes! Use the eval function"? If so, I'm afraid I may have to downvote this answer. – Mr Lister May 23 '17 at 06:27
@MrLister Then I'm afraid you have absolutely no idea what you're talking about. – Brad May 23 '17 at 16:25
@MrLister If you bothered to read the answer, you'd see that we're using the expression parser built into Math.js, built explicitly for this purpose. – Brad May 23 '17 at 16:25

Is there an alternative way i can make this calculator work without the eval function?

1 Answers1