I have a calculator that works with buttons to assign values. The main idea is to generate formulas. The values are added seamlessly into an "input". All the brackets when entering your respective button, I need to happen is to continue entering values in the parenthesis

Jquery

    $(document).ready(function () {
    $("input:button").click(function () {
        valor = $(this).val();
        actual = $("#ContentPlaceHolder1_formula").val();
        if (valor == "C") {
            $("#ContentPlaceHolder1_formula").val("");
        } else {
            if (valor == "=") {
                $("#ContentPlaceHolder1_formula").val(eval(actual));
            } else {
                $("#ContentPlaceHolder1_formula").val(actual + valor);
            }
        }
    });
});

Html

                    <div class="form-group">
                    <input class="btn" type="button" value="()" id="parentesis" />
                    <input class="btn" type="button" value="1" id="1" />
                    <input class="btn" type="button" value="2" id="2" />
                    <input class="btn" type="button" value="3" id="3" />
                    <input class="btn" type="button" value="+" id="sumar" /><br />
                    <input class="btn" type="button" value="4" id="4" />
                    <input class="btn" type="button" value="5" id="5" />
                    <input class="btn" type="button" value="6" id="6" />
                    <input class="btn" type="button" value="-" id="restar" /><br />
                    <input class="btn" type="button" value="7" id="7" />
                    <input class="btn" type="button" value="8" id="8" />
                    <input class="btn" type="button" value="9" id="9" />
                    <input class="btn" type="button" value="*" id="multiplicar" /><br />
                    <input class="btn" type="button" value="0" id="0" />
                    <input class="btn" type="button" value="=" id="igual" />
                    <input class="btn" type="button" value="C" id="C" />
                    <input class="btn" type="button" value="/" id="dividir" />
                    <asp:Button ID="btn_login" OnClick="docreateformula" CssClass="btn btn-primary btn-lg center-block" Text="Guardar" runat="server"/>
                </div>    

With that code this happen: 5+()3*()+5+3 and I need: 5+(3*(5+3))

How can I do that?

I have a calculator that works with buttons to assign values. The main idea is to generate formulas. The values are added seamlessly into an "input". All the brackets when entering your respective button, I need to happen is to continue entering values in the parenthesis

Jquery

    $(document).ready(function () {
    $("input:button").click(function () {
        valor = $(this).val();
        actual = $("#ContentPlaceHolder1_formula").val();
        if (valor == "C") {
            $("#ContentPlaceHolder1_formula").val("");
        } else {
            if (valor == "=") {
                $("#ContentPlaceHolder1_formula").val(eval(actual));
            } else {
                $("#ContentPlaceHolder1_formula").val(actual + valor);
            }
        }
    });
});

Html

                    <div class="form-group">
                    <input class="btn" type="button" value="()" id="parentesis" />
                    <input class="btn" type="button" value="1" id="1" />
                    <input class="btn" type="button" value="2" id="2" />
                    <input class="btn" type="button" value="3" id="3" />
                    <input class="btn" type="button" value="+" id="sumar" /><br />
                    <input class="btn" type="button" value="4" id="4" />
                    <input class="btn" type="button" value="5" id="5" />
                    <input class="btn" type="button" value="6" id="6" />
                    <input class="btn" type="button" value="-" id="restar" /><br />
                    <input class="btn" type="button" value="7" id="7" />
                    <input class="btn" type="button" value="8" id="8" />
                    <input class="btn" type="button" value="9" id="9" />
                    <input class="btn" type="button" value="*" id="multiplicar" /><br />
                    <input class="btn" type="button" value="0" id="0" />
                    <input class="btn" type="button" value="=" id="igual" />
                    <input class="btn" type="button" value="C" id="C" />
                    <input class="btn" type="button" value="/" id="dividir" />
                    <asp:Button ID="btn_login" OnClick="docreateformula" CssClass="btn btn-primary btn-lg center-block" Text="Guardar" runat="server"/>
                </div>    

With that code this happen: 5+()3*()+5+3 and I need: 5+(3*(5+3))

How can I do that?

• javascript
• jquery
• html
• calculator

• 6 Hey, could you throw that into a jsfiddle? – Phil Tune Commented Nov 20, 2014 at 20:54
• 1 Maybe try changing the question title. You're asking about string operations, not about cursor and/or focus. – hon2a Commented Nov 26, 2014 at 11:02

7 Answers 7

You use the following code to make it work

function occurrences(string, subString, allowOverlapping) {

    string+=""; subString+="";
    if(subString.length<=0) return string.length+1;

    var n=0, pos=0;
    var step=(allowOverlapping)?(1):(subString.length);

    while(true){
        pos=string.indexOf(subString,pos);
        if(pos>=0){ n++; pos+=step; } else break;
    }
    return(n);
}

$("input:button").click(function () {
    valor = $(this).val();
    actual = $("#ContentPlaceHolder1_formula").val();
    if (valor == "C") {
        $("#ContentPlaceHolder1_formula").val("");
    }
    else if(valor=="()")
    {
   var count1= occurrences(actual,'(',false);
   var count2= occurrences(actual,')',false);
        var count=count1+count2;
        if(count%2==0)  { $("#ContentPlaceHolder1_formula").val(actual+"("); 
                        } 
        else {
       $("#ContentPlaceHolder1_formula").val(actual+")"); 
        }
                }
    else {
        if (valor == "=") {
            $("#ContentPlaceHolder1_formula").val(eval(actual));
        } else {
            $("#ContentPlaceHolder1_formula").val(actual + valor);
        }
    }
});

demo link : http://jsfiddle/asimshahiddIT/6hje7nvh/

You can do 2 ways.

Can separate the '(' button from ')' or you can try this:

if(valor=="()"){
  for(i=0;i<actual.lenght;i++){
  var aux = actual.IndexOf("(",i);
  if(aux){
    var aux2 = actual.IndexOf(")");
    if(aux2){
      i=aux2-1;
    }else{
      valor=")";
    }else{
      valor="(";
    }
$("#ContentPlaceHolder1_formula").val(actual + valor);

Create two buttons instead of one, one for ( and one for ) and you will have no problem.

You can do it like this

$(document).ready(function () {
    var opened=0;
    $("input:button").click(function () {
        valor = $(this).val();
        actual = $("#ContentPlaceHolder1_formula").val();
        if (valor == "C") {
            $("#ContentPlaceHolder1_formula").val("");
        } else {
            if (valor == "=") {
                $("#ContentPlaceHolder1_formula").val(eval(actual));
            } else {        
                $("#ContentPlaceHolder1_formula").val(actual + valor);
                if(valor=="()") {
                    input = $("#ContentPlaceHolder1_formula");
                    input[0].selectionStart = input[0].selectionEnd = input.val().length - 1;
                }
            }
        }
    });

});

you can use '(' and ')' it be better than '()' http://jsfiddle/mazin/7yj20umu/

  $(document).ready(function () {
    $("input:button").click(function () {
     valor=$(this).val();
        actual = $('#btn_login').val();
        if (valor == "C") {
            $('#btn_login').val("");
        } else {
            if (valor == "=") {
                $('#btn_login').val(eval(actual));
            } else {
                $('#btn_login').val(actual + valor);
            }
        }
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
                    <input class="btn" type="button" value=")" id="parentesis" />
                              <input class="btn" type="button" value="(" id="parentesis" />

                    <input class="btn" type="button" value="1" id="1" />
                    <input class="btn" type="button" value="2" id="2" />
                    <input class="btn" type="button" value="3" id="3" />
                    <input class="btn" type="button" value="+" id="sumar" /><br />
                    <input class="btn" type="button" value="4" id="4" />
                    <input class="btn" type="button" value="5" id="5" />
                    <input class="btn" type="button" value="6" id="6" />
                    <input class="btn" type="button" value="-" id="restar" /><br />
                    <input class="btn" type="button" value="7" id="7" />
                    <input class="btn" type="button" value="8" id="8" />
                    <input class="btn" type="button" value="9" id="9" />
                    <input class="btn" type="button" value="*" id="multiplicar" /><br />
                    <input class="btn" type="button" value="0" id="0" />
                    <input class="btn" type="button" value="=" id="igual" />
                    <input class="btn" type="button" value="C" id="C" />
                    <input class="btn" type="button" value="/" id="dividir" />
          <input ID="btn_login" type="text" OnClick="docreateformula" CssClass="btn btn-primary btn-lg center-block" Text="Guardar"/>
</div>

Simply add a flag for the insert point position. And don't forget to reset it when necessary.

$(document).ready(function () {
    var flag = 0; // the insert point
    $("input:button").click(function () {
        valor = $(this).val();
        actual = $("#ContentPlaceHolder1_formula").val();
        if (valor == "C") {
            $("#ContentPlaceHolder1_formula").val("");
            flag = 0; // reset the flag
        } else if (valor == "=") {
            $("#ContentPlaceHolder1_formula").val(eval(actual));
            flag = 0; // reset the flag
        } else {
            // split current valor at the insert point and concat with insertion
            $("#ContentPlaceHolder1_formula").val(actual.slice(0, flag) + valor + actual.slice(flag)); 
            flag++; // increase flag by 1
        }
    });
});

You don't want to put a single () button on your calculator, because this prevents you from leaving the parentheses and continuing the formula. Just create two separate buttons ( and ) and maybe add some code for counting the number of open parentheses (to finish the formula for the user automatically when pressing = and to prevent adding ) when there is no open ().