[英]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.