0

i'm making a jquery calculator but so far I have it so only the numbers show up and the decimal when clicked. However, I need to make it so users are prevented from clicking decimal more than once, but am unsure on how to do so. I'm allowing users to type their numbers too, so I need to make it so when they click on the decimal button, it can only enter once, and when they enter the decimal on their keyboard (Using multiple keycodes like period keycode for decimal, depending on what user clicks on keyboard).

$(document).ready(function() {
  $("#input").prop("disabled", true);
  $(".number").click(function() {
    var text = $('#input').val();
    if (text != "0") {
      var value1 = text;
      var ButtonVal = $(this);
      var value2 = ButtonVal.text();
      var inputfield = value1 + value2;
      $('#input').val(inputfield);

    } else {
      $('#input').val();
    }
  });


$(document).unbind('keypress').bind('keypress', function(e) {
    var text1 = $('#input').val();
    var text3 = text1;

    if (e.keyCode == 48) {
      var inputfield = text3 + "0"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 49) {
      var inputfield = text3 + "1"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 50) {
      var inputfield = text3 + "2"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 51) {
      var inputfield = text3 + "3"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 52) {
      var inputfield = text3 + "4"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 53) {
      var inputfield = text3 + "5"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 54) {
      var inputfield = text3 + "6"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 55) {
      var inputfield = text3 + "7"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 56) {
      var inputfield = text3 + "8"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 57) {
      var inputfield = text3 + "9"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 110) {
      var inputfield = text3 + "."
      $('#input').val(inputfield);

    }
    if (e.keyCode == 190) {
      var inputfield = text3 + "."
      $('#input').val(inputfield);

    }
    if (e.keyCode == 46) {
      var inputfield = text3 + "."
      $('#input').val(inputfield);

    }
  })
});
.threadbit .thread {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.divTable {
  display: table;
  width: 20%;
  text-align: center;
}

.divTableRow {
  display: table-row;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}

.divTableBody {
  display: table-row-group;
}

button {
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 1.1em;
  font-size: 1.1em;
  border-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>



<form>
  <input type="text" name="firstname" style="width:404px;height:60px;font-size:20px;" id="input"><br>
</form>
<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">sin</button></div>
      <div class="divTableCell"><button type="text" onclick="">cos</button></div>
      <div class="divTableCell"><button type="text" onclick="">tan</button></div>
      <div class="divTableCell"><input type="radio" name="mode" value="deg">Deg</div>
      <div class="divTableCell"><input type="radio" name="mode" value="rad">Rad</div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">sin<sup>-1</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">cos<sup>-1</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">tan<sup>-1</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">&pi;</button></div>
      <div class="divTableCell"><button type="text" onclick="">e</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">x<sup>y</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">x<sup>3</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">x<sup>2</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">e<sup>x</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">10<sup>x</sup></button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick=""><sup>y</sup>&radic;x</button></div>
      <div class="divTableCell"><button type="text" onclick=""><sup>3</sup>&radic;x</button></div>
      <div class="divTableCell"><button type="text" onclick="">&radic;x</button></div>
      <div class="divTableCell"><button type="text" onclick="">In</button></div>
      <div class="divTableCell"><button type="text" onclick="">log</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">&lpar;</button></div>
      <div class="divTableCell"><button type="text" onclick="">&rpar;</button></div>
      <div class="divTableCell"><button type="text" onclick="">1/x</button></div>
      <div class="divTableCell"><button type="text" onclick="">&percnt;</button></div>
      <div class="divTableCell"><button type="text" onclick="">n&excl;</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button class="number" type="text" value="7" onclick="">7</button></div>
      <div class="divTableCell"><button class="number" type="text" value="8" onclick="">8</button></div>
      <div class="divTableCell"><button class="number" type="text" value="9" onclick="">9</button></div>
      <div class="divTableCell"><button type="text" onclick="">&plus;</button></div>
      <div class="divTableCell"><button type="text" onclick="">Back</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button class="number" type="text" value="4" onclick="">4</button></div>
      <div class="divTableCell"><button class="number" type="text" value="5" onclick="">5</button></div>
      <div class="divTableCell"><button class="number" type="text" value="6" onclick="">6</button></div>
      <div class="divTableCell"><button type="text" onclick="">&minus;</button></div>
      <div class="divTableCell"><button type="text" onclick="">Ans</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button class="number" type="text" value="1" onclick="">1</button></div>
      <div class="divTableCell"><button class="number" type="text" value="2" onclick="">2</button></div>
      <div class="divTableCell"><button class="number" type="text" value="3" onclick="">3</button></div>
      <div class="divTableCell"><button type="text" onclick="">&times;</button></div>
      <div class="divTableCell"><button type="text" onclick="">M+</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button class="number" type="text" value="0" onclick="">0</button></div>
      <div class="divTableCell"><button class="number" type="text" value="." onclick="">.</button></div>
      <div class="divTableCell"><button type="text" onclick="">EXP</button></div>
      <div class="divTableCell"><button type="text" onclick="">&#xf7;</button></div>
      <div class="divTableCell"><button type="text" onclick="">M-</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">&plusmn;</button></div>
      <div class="divTableCell"><button type="text" onclick="">RND</button></div>
      <div class="divTableCell"><button type="text" onclick="">AC</button></div>
      <div class="divTableCell"><button type="text" onclick="">&#61;</button></div>
      <div class="divTableCell"><button type="text" onclick="">MR</button></div>

    </div>
  </div>
</div>
ankitkanojia
  • 3,072
  • 4
  • 22
  • 35
Kai
  • 47
  • 7

2 Answers2

1

There are a couple of places that you need to check whether the input value already contains a . before allowing one to be inserted:

  1. In the event handler for $(".number"), add

    if (value2 != '.' || value1.indexOf('.') == -1) {

    before updating $('#input')

  2. In the keypress handler, add a similar test for key code 46 (.):

    if ($('#input').val().indexOf('.') == -1) {


$(document).ready(function() {
  $("#input").prop("disabled", true);

  $(".number").click(function() {
    var text = $('#input').val();
    if (text != "0") {
      var value1 = text;
      var ButtonVal = $(this);
      var value2 = ButtonVal.text();
      if (value2 != '.' || value1.indexOf('.') == -1) {
        var inputfield = value1 + value2;
        $('#input').val(inputfield);
      }
    } else {
      $('#input').val();
    }
  });
  $(document).unbind('keypress').bind('keypress', function(e) {
    var text1 = $('#input').val();
    var text3 = text1;

    if (e.keyCode == 48) {
      var inputfield = text3 + "0"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 49) {
      var inputfield = text3 + "1"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 50) {
      var inputfield = text3 + "2"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 51) {
      var inputfield = text3 + "3"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 52) {
      var inputfield = text3 + "4"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 53) {
      var inputfield = text3 + "5"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 54) {
      var inputfield = text3 + "6"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 55) {
      var inputfield = text3 + "7"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 56) {
      var inputfield = text3 + "8"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 57) {
      var inputfield = text3 + "9"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 110) {
      var inputfield = text3 + "."
      $('#input').val(inputfield);

    }
    if (e.keyCode == 190) {
      var inputfield = text3 + "."
      $('#input').val(inputfield);

    }
    if (e.keyCode == 46) {
      if ($('#input').val().indexOf('.') == -1) {
        var inputfield = text3 + "."
        $('#input').val(inputfield);
      }

    }
  })
});
.threadbit .thread {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.divTable {
  display: table;
  width: 20%;
  text-align: center;
}

.divTableRow {
  display: table-row;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}

.divTableBody {
  display: table-row-group;
}

button {
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 1.1em;
  font-size: 1.1em;
  border-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form>
  <input type="text" name="firstname" style="width:404px;height:60px;font-size:20px;" id="input"><br>
</form>
<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">sin</button></div>
      <div class="divTableCell"><button type="text" onclick="">cos</button></div>
      <div class="divTableCell"><button type="text" onclick="">tan</button></div>
      <div class="divTableCell"><input type="radio" name="mode" value="deg">Deg</div>
      <div class="divTableCell"><input type="radio" name="mode" value="rad">Rad</div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">sin<sup>-1</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">cos<sup>-1</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">tan<sup>-1</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">&pi;</button></div>
      <div class="divTableCell"><button type="text" onclick="">e</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">x<sup>y</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">x<sup>3</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">x<sup>2</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">e<sup>x</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">10<sup>x</sup></button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick=""><sup>y</sup>&radic;x</button></div>
      <div class="divTableCell"><button type="text" onclick=""><sup>3</sup>&radic;x</button></div>
      <div class="divTableCell"><button type="text" onclick="">&radic;x</button></div>
      <div class="divTableCell"><button type="text" onclick="">In</button></div>
      <div class="divTableCell"><button type="text" onclick="">log</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">&lpar;</button></div>
      <div class="divTableCell"><button type="text" onclick="">&rpar;</button></div>
      <div class="divTableCell"><button type="text" onclick="">1/x</button></div>
      <div class="divTableCell"><button type="text" onclick="">&percnt;</button></div>
      <div class="divTableCell"><button type="text" onclick="">n&excl;</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button class="number" type="text" value="7" onclick="">7</button></div>
      <div class="divTableCell"><button class="number" type="text" value="8" onclick="">8</button></div>
      <div class="divTableCell"><button class="number" type="text" value="9" onclick="">9</button></div>
      <div class="divTableCell"><button type="text" onclick="">&plus;</button></div>
      <div class="divTableCell"><button type="text" onclick="">Back</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button class="number" type="text" value="4" onclick="">4</button></div>
      <div class="divTableCell"><button class="number" type="text" value="5" onclick="">5</button></div>
      <div class="divTableCell"><button class="number" type="text" value="6" onclick="">6</button></div>
      <div class="divTableCell"><button type="text" onclick="">&minus;</button></div>
      <div class="divTableCell"><button type="text" onclick="">Ans</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button class="number" type="text" value="1" onclick="">1</button></div>
      <div class="divTableCell"><button class="number" type="text" value="2" onclick="">2</button></div>
      <div class="divTableCell"><button class="number" type="text" value="3" onclick="">3</button></div>
      <div class="divTableCell"><button type="text" onclick="">&times;</button></div>
      <div class="divTableCell"><button type="text" onclick="">M+</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button class="number" type="text" value="0" onclick="">0</button></div>
      <div class="divTableCell"><button class="number" type="text" value="." onclick="">.</button></div>
      <div class="divTableCell"><button type="text" onclick="">EXP</button></div>
      <div class="divTableCell"><button type="text" onclick="">&#xf7;</button></div>
      <div class="divTableCell"><button type="text" onclick="">M-</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">&plusmn;</button></div>
      <div class="divTableCell"><button type="text" onclick="">RND</button></div>
      <div class="divTableCell"><button type="text" onclick="">AC</button></div>
      <div class="divTableCell"><button type="text" onclick="">&#61;</button></div>
      <div class="divTableCell"><button type="text" onclick="">MR</button></div>

    </div>
  </div>
</div>
Nick
  • 138,499
  • 22
  • 57
  • 95
1

You can just use the number ASCII value and check the the decimals number of occurrence.

$('YOUR_SELECTOR').on("keypress keyup blur",function (event) {
  if ((event.which < 48 || event.which > 57) && (event.which != 46 || $(this).val().indexOf('.') != -1)) {
    event.preventDefault();
  }
});

Be careful using .val() and .text() in this part of the condition $(this).val().indexOf('.') != -1. You should also know whats the difference between them, you may refer to this.

You can also check in this link for the example

freetzyy
  • 46
  • 6