Javascript 我如何让一个按钮进行数学运算，然后使用JS显示它？_Javascript_Html_Class_Math_Button

Javascript 我如何让一个按钮进行数学运算，然后使用JS显示它？

javascript html class math button

Javascript 我如何让一个按钮进行数学运算，然后使用JS显示它？,javascript,html,class,math,button,Javascript,Html,Class,Math,Button,基本上，我试图让“左转”按钮显示一个“左转”，每次用户点击按钮时，方向将减少10（例如：第一次点击=170，第二次点击=160，第三次点击=150，等等），它将显示在浏览器中。我还想做一个“右转”按钮来做同样的事情，除了它在显示的最后一个方向上增加10。而且，这在一开始并没有发生，但现在我在检查浏览器中的元素时看到一个错误，该元素表示HTML中的“车辆”未定义。知道那里发生了什么吗以下是HTML： <!DOCTYPE html> <html lang="en" xmlns=

基本上，我试图让“左转”按钮显示一个“左转”，每次用户点击按钮时，方向将减少10（例如：第一次点击=170，第二次点击=160，第三次点击=150，等等），它将显示在浏览器中。我还想做一个“右转”按钮来做同样的事情，除了它在显示的最后一个方向上增加10。而且，这在一开始并没有发生，但现在我在检查浏览器中的元素时看到一个错误，该元素表示HTML中的“车辆”未定义。知道那里发生了什么吗

以下是HTML：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>My Vehicles</title>
</head>

<body>

<div id="input">

<br/>
<br/>
<br/>
    <input type="text" id="engstart"> Pick Your Starting Speed</input>
    <br/>
    <button onclick="startEngine()"> Start the Car </button>
<br/>
<br/>
    <button onclick="accel()"> Accelerate </button>
<br>
<br/>
    <button onclick="carInBrake()"> Put Car In Brake </button>
<br/>
<br/>
    <button onclick="left()"> Turn Left </button>

</div>
<div id="displays">


    <script src="vehicle.js">
    </script>

    <script>

        let pickColor = prompt("Pick a color");
        //let num = prompt("Pick your starting speed in mph");
        let num = document.getElementById('engstart').value;
        let speed = parseInt(num);

        let car = new Vehicle(pickColor, 0 , speed);


        function startEngine()
        {
            alert(car.engineOn());
            document.getElementById('displays').innerHTML += car.show() + "<br>";
        }

        function accel()
        {
            alert(car.accelerate());
            document.getElementById('displays').innerHTML += car.accelerate();
        }

        function carInBrake()
        {

            alert(car.brake());

        }


    </script>
</div>


</body>

</html>


我的车






选择你的出发速度


启动汽车




加快




刹车




左转
让pickColor=提示（“选择颜色”）；
//让num=提示（“选择以mph为单位的起动速度”）；
让num=document.getElementById（'engstart'）.value；
让速度=parseInt（num）；
let car=新车（pickColor，0，速度）；
函数startEngine（）
{
警报（car.engineOn（））；
document.getElementById（'displays'）。innerHTML+=car.show（）+“
”；
}
函数accel（）
{
警惕（汽车加速）；
document.getElementById（'displays'）.innerHTML+=car.accelerate（）；
}
函数carInBrake（）
{
警惕（汽车刹车（））；
}

下面是外部JS文件：

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

    engineOn() {

        this._engineStarted = true;
        const started = `${this._color} car engine has started (VROOM VROOM!!!)`;
        return started;
    }

    show() {

            if(this._engineStarted)
            {
                const start = `Starting Speed: ${this._currentSpeed} mph<br/>
                                Direction: ${this._direction}º `;
                return start; 
            }
    }

    brake() {

        this._engineStarted = false;
        const message = "Car In Brake";
        return message;
    }

    accelerate() {

        if(this._engineStarted)
        {
            this._currentSpeed + 10;
            const current = `Accelerating. Current speed is now ${this._currentSpeed} mph.`;

        return current;
        }

    }

    left() {

        let dir = this._direction;
        let turn = dir - 10;
        return `Turning left. direction is now ${turn} degrees`;

        let newTurn = turn - 10;

        let this._direction = newTurn;

    }

    }

}

class车辆{
建造师（颜色、方向、当前速度、最高速度、发动机启动）{
这个._color=color；
这个方向=方向；
这是。_currentSpeed=currentSpeed；
这个速度为300；
这是。_engineStarted=true；
}
引擎（）{
这是。_engineStarted=true；
const start=${this.\u color}汽车引擎已经启动（VROOM VROOM！！！）`；
返回开始；
}
show（）{
如果（此发动机已启动）
{
const start=`启动速度：${this.\u currentSpeed}mph

方向：${this._Direction}º`；
返回启动；
}
}
刹车（）{
这是。_engineStarted=false；
const message=“车辆处于制动状态”；
返回消息；
}
加速{
如果（此发动机已启动）
{
这是。_当前速度+10；
const current=`加速。当前速度现在为${this.\u currentSpeed}mph.`；
回流；
}
}
左（）{
设dir=this.\u方向；
让turn=dir-10；
返回“左转。方向现在为${turn}度”；
让newTurn=turn-10；
让这个。_方向=newTurn；
}
}
}

问题是

left（）

方法中的最后一条语句。由于

this.\u direction

是类变量，并且已经定义，因此不应该在其中使用

let

关键字。换衣服-

let this._direction = newTurn;

到

正如Patrick所指出的，返回语句也应该写在函数的末尾。

为了访问另一个

js

文件中的类

Vehicle

，您首先需要导出该类，然后导入到

js

文件中

script.js

import { Vehicle } from './vehicle.js';

let pickColor = prompt("Pick a color");
//let num = prompt("Pick your starting speed in mph");
let num = document.getElementById('engstart').value;
let speed = parseInt(num);

let car = new Vehicle(pickColor, 0, speed);

window.startEngine =function() {
  alert(car.engineOn());
  document.getElementById('displays').innerHTML += car.show() + "<br>";
}

window.accel = function() {
  alert(car.accelerate());
  document.getElementById('displays').innerHTML += car.accelerate();
}

window.carInBrake = function () {
  alert(car.brake());
}

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

  engineOn() {
    this._engineStarted = true;
    const started = `${this._color} car engine has started (VROOM VROOM!!!)`;
    return started;
  }

  show() {
    if (this._engineStarted) {
      const start = `Starting Speed: ${this._currentSpeed} mph<br/>
                                Direction: ${this._direction}º `;
      return start;
    }
  }

  brake() {
    this._engineStarted = false;
    const message = "Car In Brake";
    return message;
  }

  accelerate() {
    if (this._engineStarted) {
      this._currentSpeed + 10;
      const current = `Accelerating. Current speed is now ${this._currentSpeed} mph.`;
      return current;
    }
  }

  left() {
    let dir = this._direction;
    let turn = dir - 10;
    return `Turning left. direction is now ${turn} degrees`;
  }
}

index.html

<div id="input">
    <br />
    <br />
    <br />
    <input type="text" id="engstart"> Pick Your Starting Speed</input>
    <br />
    <button onclick="startEngine()"> Start the Car </button>
    <br />
    <br />
    <button onclick="accel()"> Accelerate </button>
    <br>
    <br />
    <button onclick="carInBrake()"> Put Car In Brake </button>
    <br />
    <br />
    <button onclick="left()"> Turn Left </button>
  </div>
  <div id="displays"></div>

  <script type="module" src="./script.js"></script>








选择你的出发速度


启动汽车




加快




刹车




左转

将您的代码复制到TS，它将检查代码是否有错误；）但总的来说，您确实注意到该语句也在

return

语句之后……那么您是说要创建另一个外部JS文件以从vehicle.JS导入吗？@p4yner56-您已经在问题i:e中提到，您想访问另一个

JS

文件i:e

vehicle.JS

中的类。

<div id="input">
    <br />
    <br />
    <br />
    <input type="text" id="engstart"> Pick Your Starting Speed</input>
    <br />
    <button onclick="startEngine()"> Start the Car </button>
    <br />
    <br />
    <button onclick="accel()"> Accelerate </button>
    <br>
    <br />
    <button onclick="carInBrake()"> Put Car In Brake </button>
    <br />
    <br />
    <button onclick="left()"> Turn Left </button>
  </div>
  <div id="displays"></div>

  <script type="module" src="./script.js"></script>