How to prevent multiple decimals in JS calculator?

JavaScript
1

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:

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

My jquery is:

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

Thanks!

3

What if I use a Regexp instead?

Something like:

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?

5

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):

<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):

<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.

7

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?

9

Here is the link to my calculator: 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:

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?

11

Ok. So now I have a successful storage variable:

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:

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?

13

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.

15

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?