如何让按钮进行数学运算，然后使用 JS 显示它？
基本上，我试图让“左转”按钮显示“左转”，每次用户单击按钮时方向将减少 10（例如：第一次单击 = 170，第二次单击 = 160，第三次click = 150 等），它将显示在浏览器中。我还想制作一个“右转”按钮来做同样的事情，除了它将 10 添加到显示的最后一个方向。此外，这最初并没有发生，但是当我检查浏览器中显示 HTML 中的“车辆”未定义的元素时，我现在看到一个错误。知道那里发生了什么吗？
这是HTML：
<!DOCTYPE html>
<html 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>
噜噜哒2回答
-
ibeautiful
为了访问Vehicle另一个js文件中的类，您首先需要导出该类，然后在您的js文件中导入。script.jsimport { 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.jsexport 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 语句也应该写在函数的末尾。
随时随地看视频慕课网APP
相关分类
JavaScript