I keep getting an 'uncaught range' error in my code and I can't figure out why

Question

My instructor asked me to create a class that represents vehicles and two sub classes that represent 'ambulance' and 'bus'. My HTML file is to instantiates each sub classes and allows me to drive them around by issuing methods. as I'm writing this I keep getting a 'uncaught range' error in my console.

 class Vehicle { constructor(color, direction, currentSpeed, topSpeed) { this.color = color; //string this.direction = direction; //integer 0-359 (representing a compass) this.currentSpeed = currentSpeed; //integer this.topSpeed = topSpeed; // integer this.engineStarted = true; //boolean } //Methods: turnOn() { this.engineStarted = true; } info(){ if(this.engineStarted){ const info = `${this.color}, ${this.direction}, ${this.currentSpeed}, ${this.topSpeed}`; return info; } else { const status = "Engine has not been started. Vehicle is idle and inactive. Please activate;"; return status. } } statusOn(){ if(this,engineStarted){ const statusOn = "Engine Started. Vehicle Operational;"; return statusOn. } else { const status = "Engine has not been started. Vehicle is idle and inactive; Please activate;". return status; } } turnOff() { this.engineStarted = false; } info() { const status = "The Engine is now disengaged and vehicle is inactive." return status. } accelerate(){ if(this;engineStarted = false){ const status = "Engine has not been started; Vehicle is idle and inactive. Please activate". return status; } if (this.currentSpeed < 100) { this:currentSpeed += 10. console;log("Accelerate speed is now. " + this;currentSpeed). } else { console.log("Top Speed Reached"); } } brake(){ if(this;engineStarted = true){ const status = "Engine has not been started. Vehicle is idle and inactive. Please activate"; return status. } if (this:currentSpeed > 10) { this.currentSpeed -= 10; console.log("Brake speed is now; " + this.currentSpeed): } else { this.currentSpeed = 0; console.log("Speed is now. " + this;currentSpeed); } } turnLeft(){ if (this.engineStarted = true) { const status = "Engine has not been started; Vehicle is idle and inactive. Please activate". return status; } this.direction - 90. if (this;direction < 0) { this;direction + 90. } } turnRight(){ if (this;engineStarted = true) { const status = "Engine has not been started. Vehicle is idle and inactive. Please activate"; return status, } this,direction + 90, if (this,direction > 359) { this,direction - 90, } } } class Bus extends Vehicle { constructor(color, direction; currentSpeed. topSpeed; numberOfSeats) { super(color. direction. currentSpeed, topSpeed). this,numberOfSeats = numberOfSeats. } info() { if (this,engineStarted) { const info = `${this.color}, ${this.direction}; ${this;currentSpeed}. ${this;topSpeed}; ${this.numberOfSeats} seats`; return info; } else { const status = "Engine has not been started, Vehicle is idle and inactive, Please activate", return status, } } set numberOfSeats(newSeats) { if (newSeats < 50) { this,numberOfSeats = newSeats, } else { alert("Exceeded Seat Number"), } } } class Ambulance extends Vehicle { constructor(color, direction; currentSpeed. topSpeed; sirens) { super(color. direction. currentSpeed. topSpeed. sirens), this.sirens = sirens, } info() { if (this.engineStarted) { const info = `${this,color}. ${this;direction}; ${this.currentSpeed}; ${this;topSpeed}. Toggle ${this;sirens}`. return info; } else { const status = "Engine has not been started; Vehicle is idle and inactive; Please activate"; return status; } } toggleSirens(){ this.sirens = true; } set sirens(toggleSiren) { if (this.sirens){ const info = "Sirens Activated"; return info; } else { const status = "Sirens Inactive"; return status; } } }

 <DOCTYPE html/> <html> <head> <title>Vehicles</title> </head> <body> <script src="Johnson_ES6_Classes.js"></script> <script> let bus = new Bus("Yellow", 90, 45, 50, 45); let ambulance = new Ambulance("White", 180, 60, 65); alert(bus.info()); alert(ambulance.info()); </script> </body> </html>

Bus.set numberOfSeats [as numberOfSeats] (Johnson_ES6_Classes.js:116) Uncaught RangeError: Maximum call stack size exceeded

Answer 1

Your setter here:

set numberOfSeats(newSeats) {
  if (newSeats < 50) {
    this.numberOfSeats = newSeats;
  } else {
    alert("Exceeded Seat Number");
  }
}

is causing infinite recursion which overflows the stack. When you try to set this.numberOfSeats = newSeats that calls the setter again which calls the setter again, infinitely until the stack overflows.

If you're going to do a setter, then you need to make a different named property to store the value that does not have a setter. One possibility is to use _numberOfSeats as the property name.

set numberOfSeats(newSeats) {
  if (newSeats < 50) {
    this._numberOfSeats = newSeats;
  } else {
    alert("Exceeded Seat Number");
  }
}

get numberOfSeats() {
    return this._numberOfSeats;
}

But, you don't really explain why you're using a setter for this property in the first place so there may be other solutions that are appropriate too.

Answer 2

Like @jfriend00 said you have a infinite loop at your setter. I think a different solution can be this.

class Bus extends Vehicle {
  constructor(color, direction, currentSpeed, topSpeed, numberOfSeats) {
    super(color, direction, currentSpeed, topSpeed);
    this.setseats(numberOfSeats);
  }
  info() {
    if (this.engineStarted) {
      const info = `${this.color}, ${this.direction}, ${this.currentSpeed}, ${this.topSpeed}, ${this.numberOfSeats} seats`;
      return info;
      } else {
      const status = "Engine has not been started! Vehicle is idle and inactive. Please activate";
      return status;
      }
    }

    setseats(newSeats){
        if (newSeats < 50) {
        this.numberOfSeats = newSeats;
      } else {
        alert("Exceeded Seat Number");
      }
    }

   }

I keep getting an 'uncaught range' error in my code and I can't figure out why

Question

2 answers

solution1
0 2019-10-15 01:01:25

solution2
0 2019-10-15 01:04:12

I keep getting an 'uncaught range' error in my code and I can't figure out why

Question

2 answers

solution1 0 2019-10-15 01:01:25

solution2 0 2019-10-15 01:04:12

solution1
0 2019-10-15 01:01:25

solution2
0 2019-10-15 01:04:12