Getting Script Errors but getting correct answers

#1

Tell us what’s happening:

I’m getting script errors for test 13, 14 ,15 and 16.

on 13 and 14 its saying that my code should produce the following:

“5 * - 5” = should produce an output of “-25”
“5 + + 5” = should produce an output of “10”
“5 * - + 5” = should produce an output of “10”

My calculator produces these results, but the test still fails.

This is the Test Requirement followed by the Error:

(13 & 14 have same requirements and Error)

If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (-) sign.

Script error. (:0)
Error: Script error. (:0)
at a.onerror //cd n.free codecamp.o rg/testable-projects-fcc/v1/bundle.js:593 :1177)
at https:// cdn.free codec amp.or g/testable-projects-fcc/v1/bundle.js:657:113627
at Array.forEach ()
at ae (https:/ /cdn .freec ode camp. org/testabl e-projects-fcc/v1/bundle.js:657:113573)
at a. (https: //cdn .fr eecod eca mp.o rg/tes table-projects-fcc/v1/bundle.js:657:189328)
at https:/ /cdn.freeco de camp. org/testab le-proj ects-fcc/v1/bundle.js:598:38668
at i.g.run (https: //c dn .fre ecode camp .org/testable-projects-fcc/v1/bundle.js:598:38963)
at N.runTest (https:// cdn. freec odecamp. org/testable-projects-fcc/v1/bundle.js:598:45686)
at https: //c dn. freecodecamp. org/testable-projects-fcc/v1/bundle.js:598:46651
at o (https: //cd n .fre eco decamp. org/t es table-projects-fc c/v1/bundle.js:598:45075)

ae([a,i,l,a,c]),o.assert.strictEqual(oe(document.getElementById(“display”)),"-25",'The sequence “5 * - 5” = should produce an output of “-25” '),f(),ae([a,i,l,“add”,a,c]),o.assert.strictEqual(oe(document.getElementById(“display”)),“10”,'The sequence “5 * - + 5” = should produce an output of “10” '),f(),ae([a,“add”,“add”,a,c]),o.assert.strictEqual(oe(document.getElementById(“display”)),“10”,'The sequence “5 + + 5” = should produce an output of “10” ')


15 & 16 asks me to produce the following:

"5 - 2 = / 2 =" should produce an output of "1.5" 
"5 + 3 = + 3 =" should produce an output of "13"

My code produces the first one perfectly, (1.5). But i don't see how mathematically
the second one is possible. I don't understand how 5 + 3 = + 3 will equal 13. Anyway, i add it - it equals 11, so i dont understand how a working calculator is supposed to produce a passing value for this test. 

This is the Test Requirement followed by the Error:

(Both 15 & 16 have the same requirements and error)

Pressing an operator immediately following "=" should start a new calculation that operates on the result of the previous evaluation
Script error. (:0)
Error: Script error. (:0)
    at a.onerror  (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:1177)
    at https://cdn .freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:113627
    at Array.forEach (<anonymous>)
    at ae (https:// cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:113573)
    at a.<anonymous> (ht tps://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js: 657:189950)
    at https://cdn. freecodecamp.org/testable-projects-fcc/v1/bundle.js:598: 38668
    at i.g .run (htt ps: //cd n. free cod ecamp . org /testable -projects-fcc/v1 /bundle. js:598:38963)
    at N. runTest (h tt ps://cdn.freecod ec amp.org/testable-projects-fcc/v1/bundle.js:598:45686)
    at ht  tps: //cdn . freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:46651
    at o (https://c dn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45075)

ae([a,l,t,c,u,t,c]), o.assert.strictEqual(oe(document.getElementById("display")),"1.5",'The sequence "5 - 2 = / 2 =" should produce an output of "1.5" '),f(),ae([a,"add", a,c,"add",r,c]),o.assert.strictEqual(oe(document.getElementById("display")),"13",'The sequ ence "5 + 3 = + 3 =" should produce an output of "13" ')



**Your code so far**
      
class App extends React.Component {
  constructor(){
    super()
    
    this.clear = this.clear.bind(this);
    this.addNum = this.addNum.bind(this);
    this.addition = this.addition.bind(this);
    this.firstNum = this.firstNum.bind(this);
    this.secNum = this.secNum.bind(this);
    this.equals = this.equals.bind(this);
    this.subtraction = this.subtraction.bind(this);
    this.times = this.times.bind(this);
    this.divide = this.divide.bind(this); 
    this.checkZero = this.checkZero.bind(this);
    this.setDecimal = this.setDecimal.bind(this);
    this.handleOpClicks = this.handleOpClicks.bind(this);


    
    
    this.state = {
      display: [0],
      firstNum: '',
      secNum: '',
      operator: '',
      onFirstNum: true,
      decimal: false,
      opClicks: 0,
      negative: true,
    }
  }
  
  clear(){
    $('#decimal').prop('disabled', false);
    $('#zero').prop('disabled', false);
    this.setState({
      display: [0],
      onFirstNum: true,
      firstNum: '',
      secNum: '',
      operator: '',
      opClicks: 0,
      negative: true
    })
  }
  
  checkZero(){
    let button = $(event.target).text();
    if(this.state.display[0] == 0 && this.state.display.length <2 && button == '0'){
    $('#zero').prop('disabled', true);
    }else if (this.state.secNum == '' && button == '0'){
    $('#zero').prop('disabled', true);
    }
    else {
      $('#zero').prop('disabled', false)
    }
  }
  
  setDecimal(){
    let decimal = $(event.target).text();
    if(decimal == '.'){
      $('#decimal').prop('disabled', true)
    }
  }
 
  
  addNum(){
    this.setDecimal();
    this.checkZero();
   if(this.state.onFirstNum == true){
  this.firstNum();
 }
    else {
      this.secNum();
    }
 }
 
  secNum(){
    if(this.state.display == this.state.firstNum){
    let num = $(event.target).text();
    this.setState({
    display: [num],
    secNum: [num]
    })  
    } else {
      let num = $(event.target).text();
    this.setState({
    display: [...this.state.display, num],
      secNum: [...this.state.display, num]
    })
  }
  }
  
  firstNum(){
     if(this.state.display[0] === 0){
    let num = $(event.target).text();
    this.setState({
    display: [num],
    negative: false
    })

  } else {
    let num = $(event.target).text();
    this.setState({
    display: [...this.state.display, num],
    negative: false
    })
  }
    console.log(this.state.negative)
  } 
  
 addition(){
 $('#decimal').prop('disabled', false)
  if(this.state.display == "-"){
    this.setState({
      operator: "+",
      display: ''
    })
  }else {
 this.setState({
   firstNum: this.state.display,
   operator: "+",
   onFirstNum: false,
   opClicks: this.state.opClicks + 1,
   negative: true
 }) 
  }
   this.handleOpClicks();
 }
  
 subtraction(){
  console.log(this.state.negative)
  $('#decimal').prop('disabled', false)
  if(this.state.negative == true && this.state.firstNum == '' 
    && this.state.secNum == '' && this.state.operator == ''){
    console.log('one')
    this.setState({
      display: '-',
      negative: false
    })
  }else if(this.state.negative == false && this.state.firstNum == '' 
         && this.state.secNum == '' && this.state.operator == ''){
    console.log('two')
         this.setState({
           firstNum: this.state.display,
           operator: '-',
           onFirstNum: false,
           negative: true,
           opClicks: this.state.opClicks + 1,
         })
  }
  else if (this.state.negative == true && this.state.firstNum != ''
           && this.state.secNum == '' && this.state.operator != ''){
    console.log('three')
            this.setState({
              display: '-',
              negative: false
    })
  }else if (this.state.negative == false && this.state.firstNum != ''
           && this.state.secNum == '' && this.state.operator != ''){
            this.setState({
              operator: '-',
              negative: true,
              opClicks: this.state.opClicks + 1,
            })
  }else if (this.secNum != ''){
       this.setState({
              operator: '-',
              negative: true,
              opClicks: this.state.opClicks + 1,
    })
  }
   this.handleOpClicks();
 }
  
 times(){
   $('#decimal').prop('disabled', false)
   this.setState({
     firstNum: this.state.display,
     operator: '*',
     onFirstNum: false,
     opClicks: this.state.opClicks + 1,
     negative: true
   })
      this.handleOpClicks();

 }
  
 divide(){
   $('#decimal').prop('disabled', false)
   this.setState({
     firstNum: this.state.display,
     operator: '/',
     onFirstNum: false,
     opClicks: this.state.opClicks + 1,
     negative: true


   })
      this.handleOpClicks();
 }
  
  handleOpClicks(){
    if(this.state.opClicks == 1){
      this.equals();
    }
  }
  
 equals(){
   let firstNum
   let result
   $('#decimal').prop('disabled', false)
   let operator = this.state.operator;
   if(typeof this.state.firstNum == "object"){
      firstNum = this.state.firstNum.join('');
   }else if (typeof this.state.firstNum == 'number'){
       firstNum = this.state.firstNum;
   }
   
   let result1 = Number(firstNum);
   let secNum = this.state.secNum.join('');
   let result2 = Number(secNum);
   
   switch(operator){
     case '+':
        result = result1 + result2;
       break;
     case '-':
        result = result1 - result2;
       break;
     case '*': 
       result = result1 * result2;
      break;
     case '/':
       result = result1 / result2;
       
   }
   this.setState({
         display: result,
         firstNum: result,
         secNum: '',
         opClicks: 1,
         negative: false
       })
 }
  
  render(){
    return <div>
            <Calculator display={this.state.display} clear={this.clear} 
              addNum={this.addNum} addition={this.addition} equals={this.equals} subtraction={this.subtraction} times={this.times} divide={this.divide} />
      <div class='test'>firstNumber: {this.state.firstNum}</div>
      <div class='test'>secondNumber: {this.state.secNum}</div>
      <div class='test'>operator:{this.state.operator}</div>
       </div>
  }
}

class Calculator extends React.Component {
  render(){
    return <div id='app'>
      <button id='equals' class='clickable' onClick={this.props.equals}>=</button>
<button id='zero' class='clickable'onClick={this.props.addNum} >0</button>
<button id='one' class='clickable' onClick={this.props.addNum}>1</button>
<button id='two' class='clickable' onClick={this.props.addNum}>2</button>
<button id='three' class='clickable' onClick={this.props.addNum}>3</button>
<button id='four' class='clickable' onClick={this.props.addNum}>4</button>
<button id='five' class='clickable' onClick={this.props.addNum}>5</button>
<button id='six' class='clickable' onClick={this.props.addNum}>6</button>
<button id='seven' class='clickable' onClick={this.props.addNum}>7</button>
<button id='eight' class='clickable' onClick={this.props.addNum}>8</button>
<button id='nine' class='clickable' onClick={this.props.addNum}>9</button>
<button id='add' class='clickable' onClick={this.props.addition}>+</button>
<button id='subtract' class='clickable' onClick={this.props.subtraction}>-</button>
<button id='multiply' class='clickable' onClick={this.props.times}>*</button>
<button id='divide' class='clickable' onClick={this.props.divide}>/</button>
<button id='decimal' class='clickable' onClick={this.props.addNum}>.</button>
<button id='clear' class='clickable' onClick={this.props.clear}>Clear</button>
<button id='display'>{this.props.display}</button>
</div>
  }
}

ReactDOM.render(<App />, document.getElementById('root'))


**Your browser information:**

User Agent is: <code> Chrome/85.0.4183.102 </code>.

**Challenge:** Build a JavaScript Calculator

**link to codepen :  **
https://codepen.io/rmungo-the-lessful/pen/rNeqeBR?editors=0010
#2

Can you please provide a link to your live code?

#3
#4

Did you happen to see anything in my live code that could help me figure out what the issue is? Any help or feed back would be super appreciative.

#5

I get this in the console this.state.secNum.join is not a function

// in equals()
console.log(typeof this.state.secNum) // string

You seem to be trying to switch from string to an array with the secNum variable. I would not suggest doing that, use to different states, one for the string, and one for the array. Also, just as an aside, using the same name for a variable and a method is kind of confusing (rename the secNum method).

1 Like
#6

Thank you so much. I figured out the problem. And now it passes. Looking in my machine’s dev tools really helped solve the problem. If any one else is having a problem like mine, where your calculator is producing the correct number but still not passing. I suggest opening up the console on your computer and working through your code…click on the error requirements and a small box on the bottom will open telling you what values your code should produce. Work through these with your console open and look for any errors. Something will pop up.

My error was that i was trying to join an array before it actually became an array and just had to use some logic on a function to not call until that object key contained an array. Something small like this could be preventing you from passing the test even while getting the desired output from the calculator!!

Thank you so much @lasjorg. I appreciate you greatly!

#7