Javacript Calculator failing validation test even though it is working

JavaScript
1

Tell us what’s happening:
The code is failing the automated validation of the decimal button action.

image
image1920×1080 277 KB

Your code so far

const numberContainsDecimal = (number) => {
    return number.toString().indexOf('.') !== -1 ? true : false;
  }
  
  const lastCharIsDecimal = (number) => {
    return number.charAt(calcInput.length-1) !== '.' ? true : false
  }
  
  const handleDecimal = () => {
    if (!(numberContainsDecimal(calcInput) && lastCharIsDecimal(calcInput))) {
      setCalcInput(Number(calcInput) + '.');
    }
  }
  
  const handleNumber = (number) => {
    number = Number(number);
    
    if (number === 0 && numberContainsDecimal(calcInput)) {
      // Use string to include trailing zeros if the number contains a decimal
      setCalcInput(calcInput + '' + number)
    } else {
      // Otherwise convert to number to remove leading zeros
      setCalcInput(Number(calcInput + '' + number));  
    }
  }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36

Challenge: Build a JavaScript Calculator

Link to the challenge:

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

In the future, just provide a link to the pen:

4

Thanks @kevinSmith I will do that next time

5

OK, a couple of things…

First of all, I find your use of input here odd:

<input type="text" id="display" value={calcInput} onChange={handleInputChange} onFocus={() => setCursorToRight('display')} />

Is your intention for people to type in their own output displays? This should not be an input. I don’t know if it’s a problem, but it’s definitely odd.

Next, looking at the test suite code, I see that there are two tests being run:

      it(`When the decimal element is clicked, a "." should append to
      the currently displayed value; two "." in one number should not be
      accepted`, function () {
        clickButtonsById([_5, _dec, _dec, _0]);
        assert.strictEqual(
          getInputValue(document.getElementById('display')),
          '5.0',
          'An input of "5 . . 0" should display 5.0 '
        );
        clearDisplay();
        clickButtonsById([_5, _dec, _5, _dec, _5]);
        assert.strictEqual(
          getInputValue(document.getElementById('display')),
          '5.55',
          'An input of "5 . 5 . 5" should display 5.55 '
        );
      });

If I do the first one manually, it works fine.

When I do the second one, pressing 5 -> . -> 5 -> . -> 5, when I get to the second decimal, I get an error in the browser console:

react-dom.production.min.js:56 Uncaught TypeError: number.charAt is not a function
    at lastCharIsDecimal (pen.js:27)
    at handleDecimal (pen.js:35)
    at onClickHandler (pen.js:133)
    at Object.vi (react-dom.production.min.js:202)
    at ui (react-dom.production.min.js:32)
    at xi (react-dom.production.min.js:32)
    at zg (react-dom.production.min.js:55)
    at rg (react-dom.production.min.js:56)
    at react-dom.production.min.js:66
    at react-dom.production.min.js:240

Note that this is the browser console, not codepen’s little “pretend” console. You open up the browser console with something like CTRL-SHFT-J. You can select the “Console” tab in the dev tools. (Note: There are a lot of really helpful tools in the dev tools. Like, tools… for devs.)

I would take a look at that and see if you can find the problem.

6
7

Once again thank you for the point in the right direction. I added toString() to lastCharIsDecimal and all is now working (and validating)

const lastCharIsDecimal = (number) => {
    return number.toString().charAt(calcInput.length-1) !== '.' ? true : false
}

As for the input the plan originally was to allow the user to directly enter a value (or maybe a complete formula) in addition to the number buttons. The further I get into this the more problems I am seeing with that line of thought. So I think I’ll try to tackle the keyboard entry a different way.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.