# How to prevent multiple decimals in JS calculator?

**URL:** <https://forum.freecodecamp.org/t/how-to-prevent-multiple-decimals-in-js-calculator/145918>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [September 4, 2017, 7:59pm UTC](https://forum.freecodecamp.org/t/how-to-prevent-multiple-decimals-in-js-calculator/145918 "2017-09-04T19:59:51Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![velvetstar](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/velvetstar/32/64758_2.png) [@velvetstar](https://forum.freecodecamp.org/u/velvetstar)\
**Post date:** [September 4, 2017, 7:59pm UTC](https://forum.freecodecamp.org/t/how-to-prevent-multiple-decimals-in-js-calculator/145918/1 "2017-09-04T19:59:51Z")

</div>

I am trying to prevent multiple decimals from being entered into my calculator, but my code isn’t working. How can I fix it?

My html is:

```auto
<input type="button" name="dot" value="." id="dot" onclick="calc.output.value += '.'"/>

```

My jquery is:

```auto
var input = '';
$(':button').click(function() {
  input = $(this).attr("value");
 if (input === '.') {
      if (input === '.' + '.') {
        input = '';
      }
    }
});

```

Thanks!

---

<div class="post-metadata">

**Author:** ![velvetstar](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/velvetstar/32/64758_2.png) [@velvetstar](https://forum.freecodecamp.org/u/velvetstar)\
**Post date:** [September 5, 2017, 7:49pm UTC](https://forum.freecodecamp.org/t/how-to-prevent-multiple-decimals-in-js-calculator/145918/3 "2017-09-05T19:49:17Z")

</div>

What if I use a Regexp instead?

Something like:

```auto
var regexp=/^\[0-9]*\.+$/;

```

where I’m searching for zero + numbers in front of the decimal, then one or more decimals? (Or do I even need to search for numbers before the decimal?)

How do I make sure the regexp matches at least 2 decimals in a row?

---

<div class="post-metadata">

**Author:** ![velvetstar](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/velvetstar/32/64758_2.png) [@velvetstar](https://forum.freecodecamp.org/u/velvetstar)\
**Post date:** [September 6, 2017, 7:04pm UTC](https://forum.freecodecamp.org/t/how-to-prevent-multiple-decimals-in-js-calculator/145918/5 "2017-09-06T19:04:54Z")

</div>

Perhaps I am not targeting the html appropriately. No matter how I write the function, it doesn’t work. Or am I missing something else?

If I write it like this (majority of code not included):

```auto
<form name="calc" id="calc">
<input type="text" name="output" id="output">
<input type="button" name="dot" value="." Id="dot" onclick="dot()"/>
</form>
$(document).ready(function(){
var keysPressed='';
var input='';
$("#dot").click(function(dot) {
input = $this.attr("value")
if (!/\./.test(keysPressed)) {
  // no dot pressed before now, so add to keysPressed
  keysPressed += input; // adds input because there was not a previous dot in keysPressed
}
  });
});

```

nothing happens when I click on the decimal button.

Alternatively, if I write it like this (majority of code not included):

```auto
<form name="calc" id="calc">
<input type="text" name="output" id="output">
<input type="button" name="dot" value="." Id="dot" onclick="calc.out.value += '.'"/>
</form>
$(document).ready(function(){
var keysPressed='';
var input='';
$("#dot").click(function() {
input = $this.attr("value")
if (!/\./.test(keysPressed)) {
  // no dot pressed before now, so add to keysPressed
  keysPressed += input; // adds input because there was not a previous dot in keysPressed
}
  });
});

```

I can press the decimal as many times as I want.

---

<div class="post-metadata">

**Author:** ![velvetstar](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/velvetstar/32/64758_2.png) [@velvetstar](https://forum.freecodecamp.org/u/velvetstar)\
**Post date:** [September 9, 2017, 5:53pm UTC](https://forum.freecodecamp.org/t/how-to-prevent-multiple-decimals-in-js-calculator/145918/7 "2017-09-09T17:53:37Z")

</div>

Ok. Got rid of conflicting events and now I get a decimal every time I click that button.

Can I search for multiple decimals being clicked (entered) without storing all click events (keys pressed) in a variable?

---

<div class="post-metadata">

**Author:** ![velvetstar](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/velvetstar/32/64758_2.png) [@velvetstar](https://forum.freecodecamp.org/u/velvetstar)\
**Post date:** [September 9, 2017, 7:42pm UTC](https://forum.freecodecamp.org/t/how-to-prevent-multiple-decimals-in-js-calculator/145918/9 "2017-09-09T19:42:04Z")

</div>

Here is the link to my calculator: [https://codepen.io/velvetstar/pen/xqzeam?editors=1010](https://codepen.io/velvetstar/pen/xqzeam?editors=1010)

At this point, I am not sure how to store all of the buttons clicked into one variable. It seems like it should be written as a function similar to this:

```auto
var keysPressed='';
var input='';
input = $this.attr("value")
$(":button").on("click", function(){
keysPressed;
}
});

```

But since :button targets all of my buttons, that prevents my other JS code, specific to certain buttons, from working. So I have not added it. Perhaps I need to re-write my html?

---

<div class="post-metadata">

**Author:** ![velvetstar](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/velvetstar/32/64758_2.png) [@velvetstar](https://forum.freecodecamp.org/u/velvetstar)\
**Post date:** [September 9, 2017, 10:50pm UTC](https://forum.freecodecamp.org/t/how-to-prevent-multiple-decimals-in-js-calculator/145918/11 "2017-09-09T22:50:21Z")

</div>

Ok. So now I have a successful storage variable:

```auto
var keysPressed = '';
var input;
$(':button').on('click', function(event) {
  input = $(this).attr("value");
  keysPressed += input;
  console.log(keysPressed);
});

```

I thought I could write a function that disables the decimal button upon finding a decimal in keysPressed:

```auto
function search(){
    var disable=document.getElementById("#dot").disabled = true; 
    if (/\./.test(keysPressed)){
      disable;    
   }
  }
  search();

```

However, this disables the decimal before one has been found. How do I fix this?

---

<div class="post-metadata">

**Author:** ![velvetstar](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/velvetstar/32/64758_2.png) [@velvetstar](https://forum.freecodecamp.org/u/velvetstar)\
**Post date:** [September 10, 2017, 7:01pm UTC](https://forum.freecodecamp.org/t/how-to-prevent-multiple-decimals-in-js-calculator/145918/13 "2017-09-10T19:01:24Z")

</div>

Nope. That didn’t work. I can press the decimal as many times as I want.

I also realized the # before “dot” shouldn’t be there and removed it. But that didn’t change anything.

---

<div class="post-metadata">

**Author:** ![velvetstar](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/velvetstar/32/64758_2.png) [@velvetstar](https://forum.freecodecamp.org/u/velvetstar)\
**Post date:** [September 16, 2017, 9:48pm UTC](https://forum.freecodecamp.org/t/how-to-prevent-multiple-decimals-in-js-calculator/145918/15 "2017-09-16T21:48:26Z")

</div>

I have moved the individual button functions so that they are all under a main button click function.

I need to re-write my code pertaining to the decimal button so that not only can someone only press one decimal at a time, but can press the decimal again for a different number in the same equation. For example: 3.2 + 3.2. Right now, I have it written so that once you push the decimal, it is disabled. So only one number could have a decimal until you refresh the page.

My pseudo code would be:

If button clicked is decimal {  
If decimal clicked, only allow one decimal unless an operand button ( +, -, x, /) is clicked afterwards.  
If an operand is clicked and then another number, the decimal button may be clicked again, once only.  
}  
When the = button is clicked, reset keysPressed to " ".

How do I translate that into actual JS? Or is that oversimplified?

---

<div class="post-metadata">

**Author:** ![jwilkins.oboe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/32/179497_2.png) [@jwilkins.oboe](https://forum.freecodecamp.org/u/jwilkins.oboe)\
**Post date:** [January 18, 2021, 8:23am UTC](https://forum.freecodecamp.org/t/how-to-prevent-multiple-decimals-in-js-calculator/145918/16 "2021-01-18T08:23:50Z")

</div>