繁体   English   中英

如何让按钮做数学运算然后使用 JS 显示它?

[英]How can I make a button do math and then display it using JS?

基本上,我试图让“左转”按钮显示“左转”,每次用户单击该按钮时方向都会减少 10(例如:第一次单击 = 170,第二次单击 = 160,第三次click = 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>

这是外部 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;

    }

    }

}

为了访问另一个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());
}

vehicle.js

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>

问题是left()方法中的最后一条语句。 由于this._direction是类变量并且已经定义,您不应该在那里使用let关键字。 只是改变-

let this._direction = newTurn;

this._direction = newTurn;

正如 Patrick 所指出的,return 语句也应该写在函数的末尾。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM