Invalid JS token

Question

I’m having problems with a calculator design done in JS. On a specific line it says that an unexpected token has been found. I already went to Github of the course and checked their final file, and on the line where in my program (I use Visualcodeestudio) appears the error, in the other program I opened (Sublime) their code, is no error..

Grateful from now on!

class CalcController {

constructor(){
this._locale = 'pt-BR';
this._displayCalcEl = document.querySelector("#display");
this._dateEl = document.querySelector("#data");
this._timeEl = document.querySelector("#hora");
this._currentDate;
this.initialize();
this.initButtonsEvents();

}

initialize(){
   
this.setDisplayDateTime();

setInterval(()=>{

    this.setDisplayDateTime();

}, 1000);


addEventListenerAll(element, events, fn){

        events.split(' ').forEach(event => {

            element.addEventListener(event, fn, false);

        });


}

   




}

initButtonsEvents(){

    let buttons = document.querySelectorAll("#buttons > g, #parts > g") 
        
        buttons.forEach((btn, index)=>{

            this.addEventListenerAll(btn, "click drag", e=>{

                let textBtn = btn.className.baseVal.replace("btn-",""));
        
        
            });

            this.addEventListenerAll(btn, "mouseover mouseup mousedown", e=>{

                btn.style.cursor = "pointer";

            });

        });



}

setDisplayDateTime() {

    this.displayDate = this.currentDate.toLocaleDateString(this._locale,{
        day:"2-digit",
        month: "long",
        year:"numeric"

    });
    this.displayTime = this.currentDate.toLocaleTimeString(this._locale);



}

get displayTime(){
return this._timeEl.innerHTML;

}

set displayTime(valor){
    return this._timeEl.innerHTML = valor;
}


get displayDate(){
return this._dateEl.innerHTML;

}

set displayDate(valor){
    return this._dateEl.innerHTML = valor;
}


get displayCalc(){
    return this._displayCalcEl.innerHTML;
}

set displayCalc(valor){
    this._displayCalcEl.innerHTML = valor;
}

get currentDate(){
    return new Date();
}

set currentDate(valor){
    this._currentDate = valor;
}


}

Answer 1

You only get this error in Vscode because it must be configured with Eslint, which helps you in identifying errors in the code. Your error is JS formatting and syntax, so invalid token error.

class CalcController {
  constructor() {
    this._locale = "pt-BR";
    this._displayCalcEl = document.querySelector("#display");
    this._dateEl = document.querySelector("#data");
    this._timeEl = document.querySelector("#hora");
    this._currentDate;
    this.initialize();
    this.initButtonsEvents();
  }

  initialize() {
    this.setDisplayDateTime();

    setInterval(() => {
      this.setDisplayDateTime();
    }, 1000);
  }

  addEventListenerAll(element, events, fn) {
    events.split(" ").forEach(event => {
      element.addEventListener(event, fn, false);
    });
  }

  initButtonsEvents() {
    let buttons = document.querySelectorAll("#buttons > g, #parts > g");

    buttons.forEach((btn, index) => {
      this.addEventListenerAll(btn, "click drag", e => {
        let textBtn = btn.className.baseVal.replace("btn-", "");
      });

      this.addEventListenerAll(btn, "mouseover mouseup mousedown", e => {
        btn.style.cursor = "pointer";
      });
    });
  }

  setDisplayDateTime() {
    this.displayDate = this.currentDate.toLocaleDateString(this._locale, {
      day: "2-digit",
      month: "long",
      year: "numeric"
    });
    this.displayTime = this.currentDate.toLocaleTimeString(this._locale);
  }

  get displayTime() {
    return this._timeEl.innerHTML;
  }

  set displayTime(valor) {
    return (this._timeEl.innerHTML = valor);
  }

  get displayDate() {
    return this._dateEl.innerHTML;
  }

  set displayDate(valor) {
    return (this._dateEl.innerHTML = valor);
  }

  get displayCalc() {
    return this._displayCalcEl.innerHTML;
  }

  set displayCalc(valor) {
    this._displayCalcEl.innerHTML = valor;
  }

  get currentDate() {
    return new Date();
  }

  set currentDate(valor) {
    this._currentDate = valor;
  }
}

Whenever you receive this invalid token error stick to the syntax of writing your code and use Eslint logs to your advantage