Split JS calculator input

Question

Martin C++ 0 Light Poster

11 Years Ago

Hello,

I am making a calculator for school and so far I have written a code that allows user to combine and input. Calling it a formula would be wrong I think. It's like User pushesh buttons and comes up with an input like this for example : 11+4+9-5. Now that is just a string. What I need is to split the string where the operators occur and then choose a function based on the operand. Basically I need to convert that string to working forula and output the answer. This is my code so far.

<html>
    <head>
        <title>Kalkulaator</title>
        <style>
            .button
            {
                float:left;
            }
            .left
            {
                float:left;
            }
            .clear
            {
                clear:both;
            }
        </style>
        <script>
            function Arvuti(kiht){
                ekraan = document.getElementById("ekraan");

                this.registerInput = function(vaartus){
                    ekraan.value = ekraan.value + vaartus;
                }

                this.arvuta = function(){
                    ekraan.value
                }
            }

            var a1;
            function init(){
                a1 = new Arvuti("kiht1");
            }
            window.onload = init;
        </script>
    </head>
    <body>
        <div id="kalkulaator1">
            <input id="ekraan" type="text" width="100" disabled />
            <div class="clear"></div>
            <table class="nupud left">
                <tr>
                    <td><input type='button' value='1' onclick='a1.registerInput(this.value);' class="button" /></td>
                    <td><input type='button' value='2' onclick='a1.registerInput(this.value);' class="button" /></td>
                    <td><input type='button' value='3' onclick='a1.registerInput(this.value);' class="button" /></td>
                </tr>
                <tr>
                    <td><input type='button' value='4' onclick='a1.registerInput(this.value);' class="button" /></td>
                    <td><input type='button' value='5' onclick='a1.registerInput(this.value);' class="button" /></td>
                    <td><input type='button' value='6' onclick='a1.registerInput(this.value);' class="button" /></td>
                </tr>
                <tr>
                    <td><input type='button' value='7' onclick='a1.registerInput(this.value);' class="button" /></td>
                    <td><input type='button' value='8' onclick='a1.registerInput(this.value);' class="button" /></td>
                    <td><input type='button' value='9' onclick='a1.registerInput(this.value);' class="button" /></td>
                </tr>
            </table>
            <table class="operaatorid left">
                <tr>
                    <td><input type="button" value="+" onclick='a1.registerInput(this.value);'/></td>
                </tr>
                <tr>
                    <td><input type="button" value="-" onclick='a1.registerInput(this.value);'/></td>
                </tr>
            </table>
            <input type="button" value="Arvuta" onclick="a1.arvuta();" class="left clear" />
        </div>
    </body>
</html>

The argument for Arvuta() is not beeing used atm but it will be used to output the calculator in the div that is named what the argument holds.

javascript

3 Contributors
2 Replies
398 Views
3 Hours Discussion Span
Latest Post 11 Years Ago Latest Post by gon1387

stbuchok

11 Years Ago

If security is no concern you can use eval.

test it out:

<html>
<head>

<script>

alert(eval('4+3-1'));
alert(eval('4*(3-1)'));

</script>

</head>
<body>


</body>
</html>

This gives you 6 for the first alert and 8 for the second alert. This should only be used if security is not an issue. Also if you limit the field to use only numeric and mathematical characters [().-+^%...] then it should be fairly good.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

gon1387 22 Newbie Poster · Answer 1 · 2013-02-05T21:27:11+00:00

Hi Martin C++,

You can match each operator and operand using regex, like this.

var str = "11+4+9-5.5/5*10";
var arr = [];
var cur;

// result of match for str
// ["11", "+", "4", "+", "9", "-", "5.5", "/", "5", "*", "10", ""]
arr = str.match(/[\*\/+-]|[0-9.]{0,}/g);

// get each value in the "arr" array
for(cur in arr){
    /************************************
      ... Do computation stuff here...
    ************************************/
}