1

Trying to make a simple javascript calculator and having a problem. How can i delete only one number when i press < 999 when press < we got 99 like this sorry for bad Englesh.

    function run1(){

     document.case.display.value += "1"
    };
    function run2(){

     document.case.display.value += "2"
    };
    function run3(){

     document.case.display.value += "3"
    };
    function run4(){

     document.case.display.value += "4"
    };
    function run5(){

     document.case.display.value += "5"
    };

    function run6(){

     document.case.display.value += "6"
    };

    function run7(){

     document.case.display.value += "7"
    };

    function run8(){

     document.case.display.value += "8"
    };

    function run9(){

     document.case.display.value += "9"
    };

    function run0(){

     document.case.display.value += "0"
    };
    function runPlus(){

     document.case.display.value += "+"
    };
    function runMinus(){

     document.case.display.value += "-"
    };
    function runDivide(){

     document.case.display.value += "/"
    };
    function runMultiply(){

     document.case.display.value += "*"
    };
    function runComma(){

     document.case.display.value += "."
    };
    function runBack(){

     document.case.display.value -= "2"
    };

    function runC(){

     document.case.display.value = ""
    };


    function runEquals() {
            if (document.case.display.value == "") {
             document.case.display.value = ""
            } else  {
     var equals = eval(document.case.display.value)
     document.case.display.value = equals;
    }
    }
    not (display) {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-size: 16px;
     vertical-align: baseline;
     background: transparent;
    }
    body {
     line-height: 1;
    }
    ul {
     list-style: none;
    }

    body {
     width: 500px;
    }
    form {
     background-color: 080808;
     text-align: center;
     padding: 7px;


    }
    #display {
     width: 98%;
     height: 30px;
     text-align: right;
     font-size: 1.5rem;
    }
    .digit {
     font-size: 2rem;
     background-color:  gray;
     height: 55px;
     width: 20%;
     border-radius: 5px;
     display: inline-block;
     padding: 5px;
    }
    .oper {
     font-size: 2rem;
     background-color:green ;
     height: 55px;
     width: 20%;
     border-radius: 5px;
     display: inline-block;
     padding: 5px;
    }
    #clearMem {
     background-color: red;
    }
    #equal {
     background-color: yellow;
     width: 82%;

    }
    <html>
    <head>
        <title>Calculator Project</title>
         <link rel="stylesheet" href="main.css" type="text/css">
            <script src="main.js" type="text/javascript"></script>
    </head>

    <body>


    <form name="case">
      <input name="display" id="display" value="">

        <input type="button" class="digit" value="1" onclick="run1()">
        <input type="button" class="digit" value="2" onclick="run2()">
        <input type="button" class="digit" value="3" onclick="run3()">
        <input type="button" id="plus"  class="oper"  value="+"  onclick="runPlus()">

        <input type="button" class="digit" value="4" onclick="run4()">
        <input type="button" class="digit" value="5" onclick="run5()">
        <input type="button" class="digit" value="6" onclick="run6()">
        <input type="button" id="minus"  class="oper"  value="-" onclick="runMinus()" >

        <input type="button" class="digit" value="7" onclick="run7()">
        <input type="button" class="digit" value="8" onclick="run8()">
        <input type="button" class="digit" value="9" onclick="run9()">
        <input type="button" id="divide"  class="oper"  value="/" onclick="runDivide()" >

        <input type="button" class="digit" value="0" onclick="run0()">
        <input type="button" id="comma" class="digit" value="." onclick="runComma()">
        <input type="button" id="clearMem" class="oper" value="CE" onclick="runC()">

        <input type="button" id="multiply"  class="oper"  value="*" onclick="runMultiply()">
        <input type="button" id="back"  class="oper" value="<" onclick="runBack()">
     <input type="button" id="equal"  class="oper" value="=" onclick="runEquals()">




    </body>

Maybe we can split out with 10 we maybe need Math.ceil() 69/10 = 6.9 = 6

6.99/10 = 0.699 = it is 0 or 1 too i need only one number been deleted.

1 Answers1

0

When you press back, you want to slice off the last character from your input. Something like value.slice(0, -1). Then, assign that value back to your input.

var val = document.case.display.value.slice(0, -1);
document.case.display.value = val;

Additional ways to drop the last character: https://stackoverflow.com/a/952945/1253479

Updated code snippet:

    function run1(){

     document.case.display.value += "1"
    };
    function run2(){

     document.case.display.value += "2"
    };
    function run3(){

     document.case.display.value += "3"
    };
    function run4(){

     document.case.display.value += "4"
    };
    function run5(){

     document.case.display.value += "5"
    };

    function run6(){

     document.case.display.value += "6"
    };

    function run7(){

     document.case.display.value += "7"
    };

    function run8(){

     document.case.display.value += "8"
    };

    function run9(){

     document.case.display.value += "9"
    };

    function run0(){

     document.case.display.value += "0"
    };
    function runPlus(){

     document.case.display.value += "+"
    };
    function runMinus(){

     document.case.display.value += "-"
    };
    function runDivide(){

     document.case.display.value += "/"
    };
    function runMultiply(){

     document.case.display.value += "*"
    };
    function runComma(){

     document.case.display.value += "."
    };
    function runBack(){
        var val = document.case.display.value.slice(0, -1);
        document.case.display.value = val;
    };

    function runC(){

     document.case.display.value = ""
    };


    function runEquals() {
            if (document.case.display.value == "") {
             document.case.display.value = ""
            } else  {
     var equals = eval(document.case.display.value)
     document.case.display.value = equals;
    }
    }
    not (display) {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-size: 16px;
     vertical-align: baseline;
     background: transparent;
    }
    body {
     line-height: 1;
    }
    ul {
     list-style: none;
    }

    body {
     width: 500px;
    }
    form {
     background-color: 080808;
     text-align: center;
     padding: 7px;


    }
    #display {
     width: 98%;
     height: 30px;
     text-align: right;
     font-size: 1.5rem;
    }
    .digit {
     font-size: 2rem;
     background-color:  gray;
     height: 55px;
     width: 20%;
     border-radius: 5px;
     display: inline-block;
     padding: 5px;
    }
    .oper {
     font-size: 2rem;
     background-color:green ;
     height: 55px;
     width: 20%;
     border-radius: 5px;
     display: inline-block;
     padding: 5px;
    }
    #clearMem {
     background-color: red;
    }
    #equal {
     background-color: yellow;
     width: 82%;

    }
    <html>
    <head>
        <title>Calculator Project</title>
         <link rel="stylesheet" href="main.css" type="text/css">
            <script src="main.js" type="text/javascript"></script>
    </head>

    <body>


    <form name="case">
      <input name="display" id="display" value="">

        <input type="button" class="digit" value="1" onclick="run1()">
        <input type="button" class="digit" value="2" onclick="run2()">
        <input type="button" class="digit" value="3" onclick="run3()">
        <input type="button" id="plus"  class="oper"  value="+"  onclick="runPlus()">

        <input type="button" class="digit" value="4" onclick="run4()">
        <input type="button" class="digit" value="5" onclick="run5()">
        <input type="button" class="digit" value="6" onclick="run6()">
        <input type="button" id="minus"  class="oper"  value="-" onclick="runMinus()" >

        <input type="button" class="digit" value="7" onclick="run7()">
        <input type="button" class="digit" value="8" onclick="run8()">
        <input type="button" class="digit" value="9" onclick="run9()">
        <input type="button" id="divide"  class="oper"  value="/" onclick="runDivide()" >

        <input type="button" class="digit" value="0" onclick="run0()">
        <input type="button" id="comma" class="digit" value="." onclick="runComma()">
        <input type="button" id="clearMem" class="oper" value="CE" onclick="runC()">

        <input type="button" id="multiply"  class="oper"  value="*" onclick="runMultiply()">
        <input type="button" id="back"  class="oper" value="<" onclick="runBack()">
     <input type="button" id="equal"  class="oper" value="=" onclick="runEquals()">




    </body>
Jack
  • 9,151
  • 2
  • 32
  • 44