Как сделать так, чтобы кнопка выполняла математику, а затем отображала ее, используя JS? - PullRequest
Новая
       2

Как сделать так, чтобы кнопка выполняла математику, а затем отображала ее, используя JS?

0 голосов
/ 11 марта 2020

По сути, я пытаюсь заставить кнопку «Повернуть влево» отобразить «поворот влево», где направление будет уменьшаться на 10 каждый раз, когда пользователь нажимает кнопку (например: первый клик = 170, второй клик = 160, третий щелчок = 150 и т. Д. c.), И он отобразится в браузере. Я также хочу сделать кнопку «Повернуть направо», чтобы сделать то же самое, за исключением того, что ДОБАВЛЯЕТ 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;

    }

    }

}

Ответы [ 2 ]

1 голос
/ 11 марта 2020

Чтобы получить доступ к классу Vehicle в другом файле js, сначала необходимо экспортировать класс, а затем импортировать его в файл 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>
0 голосов
/ 11 марта 2020

Проблема - последнее утверждение в методе left(). Поскольку this._direction является переменной класса и уже определена, вам не следует использовать ключевое слово let. Просто измените - 

let this._direction = newTurn;

на 

this._direction = newTurn;

Как указал Патрик, оператор возврата также должен быть записан в конце функции.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...