javascript - HTML 和 JavaScript 类中的方法不起作用

Question

我正在尝试从类 Bil 中打印出 gass 方法。我希望它在单击 HTML 中的按钮时打印出来。我收到一条错误消息

Uncaught ReferenceError: gass is not defined at HTMLButtonElement.onclick 
(index.html:9). 

这个错误的原因可能是什么？

 // My HTML Code  

<button onclick="gass()">Gass for Volvo</button>
<p id="test"></p>

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

 //javascript code

class Bil{

    constructor(registeringsnr, merke, yearmodel, hastighet)
    {

        this.registeringsnr = registeringsnr;
        this.m = merke;
        this.yearmodel = yearmodel;
        this.hastighet = hastighet;
    }

gass() 
{
    var nyHastighetettergass = this.hastighet +10;

    return nyHastighetettergass;
}

 brems()
    {
        var nyHastighetetterbrems = this.hastighet - 10;

        return nyHastighetetterbrems;
    }
}

var volvo = new Bil(100,"volvo",2018,1);
var ferrari = new Bil(200, "ferrari", 2011, 0);
var lada = new Bil(300,"lada", 2012,0);

document.getElementById("test").innerHTML = gass();

Answer 1

在 Javascript 中，类声明不会被提升，尽管函数声明会被提升。这意味着 JS 不会自动将类声明提升到文件顶部 - 因此您需要将 Bil 类移动到 Button 标签上方。

此外，您需要创建一个 Bil 类型的实例变量，然后在您的按钮中对该实例变量调用 gass() 方法。

因此，要使其正常工作，您的代码应如下所示:

//declare Bil class at the top
var myBil = new Bil(v,x,y,z); //substitute v x y z for actual values like you did below your class declaration in the original code
<button onclick="myBil.gass()">Gass for Volvo</button>