无法从onSubmit调用类中的方法

Question

我有以下js文件：

class UniversityListModals {

  test(){
    alert("ed")
  }
  
}

const universityListModals = new UniversityListModals();
universityListModals.test();

当然会打开警报窗口。然而，在我的html表单标记上，我希望调用这个完全相同的方法：

<form method="GET" action="/something/" class="" onSubmit="universityListModals.test()">

然而，当我按submit按钮时，控制台会说："Uncaught ReferenceError: universityListModals is not defined".

我如何通过js而不是直接从html调用它？

Answer 1

它看起来像是在一个作用域环境中声明您的函数，所以DOM无法到达变量名。

确保全局范围内的universityListModals变量。

​

class UniversityListModals {

  test(){
    alert("ed")
  }
  
}

const universityListModals = new UniversityListModals();

<form method="GET" action="/something/" class="" onSubmit="universityListModals.test()">
  <button type="submit">Submit</button>
</form>

​

Answer 2

您应该检查脚本是如何加载到html页面中的。

但是，如果您想按照您的要求直接从js中得到它，您可以做出类似的事情。

class UniversityListModals {

  test(){
    alert("ed")
  }
  
}

document.onload = function(){
  const universityListModals = new UniversityListModals();
  document.getElementByTagName("form")[0].addEventListener('submit', function(){
     universityListModals.test();
  }
}