Попытка использовать класс JS для отображения сообщения в соответствии с пользовательским вводом - PullRequest
Новая
       5

Попытка использовать класс JS для отображения сообщения в соответствии с пользовательским вводом

0 голосов
/ 25 февраля 2020

Итак, я пытаюсь манипулировать этим классом (Транспортным средством), который я настроил в JS, чтобы он интерполировал сообщение на основе пользовательского ввода. Чтобы уточнить, я пытаюсь получить сообщение, чтобы показать, как быстро пользователь движется в зависимости от скорости, которую он выбирает. У меня проблемы с сохранением ввода, чтобы его можно было сравнить со следующим экземпляром и отобразить соответствующее сообщение. Другими словами, если человек выбирает скорость выше, чем предыдущая, в сообщении должно быть указано ускорение, а если оно выбрано ниже, то должно произойти замедление. Я всегда получаю только ускоряющее сообщение. Я хотел бы сделать так, чтобы он реагировал соответственно на каждый ввод и чтобы пользователю приходилось обновлять sh страницу для обновления. 

<!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>

1 Ответ

0 голосов
/ 26 февраля 2020

Просто установите currentSpeed ​​на значение, которое вы получите на входе как: 

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>
...