javascript – Trying to use JS class to display message according to user input-ThrowExceptions

Exception or error:

So what I’m trying to do is manipulate this class (Vehicle) that I set up in JS so that it will interpolate a message based on the user input. To clarify, I’m trying to get a message to display to say how fast the user is going based on what speed they choose. What I’m having trouble with is saving the input so it can be compared to the next instance and display the according message. In other words, if the person picks a speed higher than the previous, the message should say accelerating, and if they picked lower, it should say de-celerating. I’m always only getting the accelerating message. I’d like to make it so it responds accordingly to every input and so that the user would have to refresh the page for an update.

<!DOCTYPE html>
<html>
<head>
<title>JS Classes Project</title>
<head>

<body>

<div id="info">


<input type="text" id="input1"></input>
<button onclick="whatsTheSpeed()">Speed</button>


</div>

<div id="display">



</div>


<script>

class Vehicle{
//Set up object
constructor(color, direction, currentSpeed, topSpeed, engineStarted){
this._color = color;
this._direction = direction;
this._currentSpeed = currentSpeed;
this._topSpeed = 300;
this._engineStarted = true;
}



accelerate(){
let speed = this._currentSpeed;
let input = document.getElementById('input1').value;

if(input > speed) {

return `Accelerating. Car is now travelling @ ${input} mph.`;
} else if (input < speed)
{
     return `De-celerating. Car is now travelling @ ${input} mph.`;
}

if(input > 300){
this_.engineStarted = false;
alert("Oh no! Too Fast! Engine Overheated");

}

}

}

</script>

<script>



let myCar = new Vehicle("color", 0, 0, 0);

function whatsTheSpeed() {
//document.getElementById('carSpeed').submit();
document.getElementById('display').innerHTML =  myCar.accelerate();
}


</script>



</body>
</html>
How to solve:

Just set the currentSpeed to the value that you get in the input as:

let input = document.getElementById('input1').value;
this._currentSpeed = document.getElementById('input1').value;
class Vehicle {
  //Set up object


  constructor(color, direction, currentSpeed, topSpeed, engineStarted) {
    this._color = color;
    this._direction = direction;
    this._currentSpeed = currentSpeed;
    this._topSpeed = 300;
    this._engineStarted = true;
  }


  accelerate() {
    let speed = this._currentSpeed;

    let input = document.getElementById('input1').value;
    this._currentSpeed = document.getElementById('input1').value;
    if (input > speed) {

      return `Accelerating. Car is now travelling @ ${input} mph.`;
    } else if (input < speed) {
      return `De-celerating. Car is now travelling @ ${input} mph.`;
    }

    if (input > 300) {
      this_.engineStarted = false;
      alert("Oh no! Too Fast! Engine Overheated");

    }

  }

}
let myCar = new Vehicle("color", 0, 0, 0);

function whatsTheSpeed() {

  //document.getElementById('carSpeed').submit();
  document.getElementById('display').innerHTML = myCar.accelerate();
}
<!DOCTYPE html>
<html>

<head>
  <title>JS Classes Project</title>

</head>

<body>

  <div id="info">


    <input type="text" id="input1" />
    <button onclick="whatsTheSpeed()">Speed</button>


  </div>

  <div id="display">



  </div>


  <script>
  </script>

  <script>
  </script>



</body>

</html>

Leave a Reply

Your email address will not be published. Required fields are marked *