onclick for button not call function

我目前遇到的一个问题是无法在提交按钮的onclick事件中调用函数。

 $(document).ready(function() { function validate() { var contactName = document.getElementById("contact-name").value; alert("Thank you " + contactName); } }); 

  
 NAME  EMAIL  MESSAGE  
 SUBMIT MESSAGE 

Answer 1

您应该在$(document).ready 之外编写validate()函数作为DOM加载时绑定的onclick – 而$(document).ready 范围函数。

这意味着该函数是闭包的 本地函数，如果它在$(document).ready写入，则不会全局可见。

见下面的演示：

 function validate() { var contactName = document.getElementById("contact-name").value; alert("Thank you " + contactName); } 

 
 NAME  EMAIL  MESSAGE  
 SUBMIT MESSAGE 

Answer 2

正如其他人所提到的，这里的问题是定义了validate()函数的范围。

JavaScript是“词法范围的” ，这意味着声明的位置决定了其他代码可以到达的位置。

您的validate函数在匿名document.ready函数内声明（作用域）。 这意味着可以“看到” validate的唯一位置是共享该范围的其他代码。 onclick=validate()行超出了该范围，这就是您的函数未被调用的原因。

但是，不要将validate()函数移动到document.ready()回调之外（因此使其成为全局，这是一件坏事），你真的应该删除onclick内联HTML事件属性，因为这是一种不好的做法（ 参见这有几个原因）并在脚本区域中执行事件绑定。 这种方法允许您在与validate()函数相同的范围内设置事件并保持HTML清洁：

 $(document).ready(function() { // Do your event binding in JavaScript, not as inline HTML event attributes: $("#submit").on("click", validate); // Now the event handler reference and the function are in the same scope function validate() { var contactName = document.getElementById("contact-name").value; alert("Thank you " + contactName); } }); 

  
 NAME  EMAIL  MESSAGE  
 SUBMIT MESSAGE 

Answer 3

首先，你应该避免这样的内联处理程序。 其次，取决于表单提交过程。 你应该在

标签内有按钮。 然后添加

。

否则，将jQuery和$.ajax()与click事件处理程序一起使用：

 $('#submit').on('click', () { $.ajax({check properties in jquery api docs}, (result) => { // do something }, (e) => { // do something on error }) })