如何使用 JS 类根据用户输入显示消息？答案

【问题标题】：How do you use JS class to display message according to user input?如何使用 JS 类根据用户输入显示消息？
【发布时间】：2020-02-25 20:15:47
【问题描述】：

所以我要做的是操纵我在 JS 中设置的这个类（Vehicle），以便它根据用户输入插入一条消息。为了澄清，我试图让一条消息显示，说明用户根据他们选择的速度有多快。我遇到的问题是保存输入，以便可以将其与下一个实例进行比较并显示相应的消息。换句话说，如果该人选择的速度高于之前的速度，则消息应显示为加速，如果选择的速度较低，则应显示为减速。我总是只收到加速消息。我想让它响应每个输入，这样用户就必须刷新页面以进行更新。

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

【问题讨论】：

标签： javascript html class interpolation

【解决方案1】：

只需将 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>

【讨论】：