[英]onclick for button not calling function
One of the problems I am experiencing at the moment is not being able to call a function in the onclick
event of the submit button. 我目前遇到的问题之一是无法在
onclick
按钮的onclick
事件中调用函数。
$(document).ready(function() { function validate() { var contactName = document.getElementById("contact-name").value; alert("Thank you " + contactName); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <label for="name">NAME</label> <input id="contact-name" name="name" placeholder="Please enter your name..." type="text"> <label for="email">EMAIL</label> <input id="contact-email" name="email" placeholder="Please enter your contact email..." type="text"> <label for="email">MESSAGE</label> <textarea id="contact-message" name="message" placeholder="Please enter your message.."></textarea> </form> <button type="button" id="submit" onclick="validate();">SUBMIT MESSAGE</button>
You should write the validate()
function outside the $(document).ready
as the onclick
in binded when the DOM loads - while $(document).ready
scopes the function. 你应该写
validate()
的函数外 $(document).ready
作为onclick
中绑定的DOM负载时 -而$(document).ready
作用域的功能。
This means the function is local to the closure and will not be visible globally if its written so inside $(document).ready
. 这意味着该函数对于闭包是局部的 ,并且如果在
$(document).ready
内部编写该函数,则该函数将不会全局可见。
See demo below: 请参见下面的演示:
function validate() { var contactName = document.getElementById("contact-name").value; alert("Thank you " + contactName); }
<form> <label for="name">NAME</label> <input id="contact-name" name="name" placeholder="Please enter your name..." type="text"> <label for="email">EMAIL</label> <input id="contact-email" name="email" placeholder="Please enter your contact email..." type="text"> <label for="email">MESSAGE</label> <textarea id="contact-message" name="message" placeholder="Please enter your message.."></textarea> </form> <button type="button" id="submit" onclick="validate();">SUBMIT MESSAGE</button>
As others have mentioned, the issue here is the scope that the validate()
function is defined in. 正如其他人所提到的,这里的问题是
validate()
函数的定义范围。
JavaScript is "lexically scoped" , meaning that the location of a declaration determines from where it can be reached by other code. JavaScript是“按词法定义的” ,这意味着声明的位置决定了其他代码可以从何处访问声明。
Your validate
function is declared (scoped to) inside the anonymous document.ready
function. 您的
validate
函数在匿名document.ready
函数内部声明(作用域为)。 This means that the only place where validate
can be "seen" is by other code that shares that scope. 这意味着可以“看到”
validate
的唯一地方是共享该范围的其他代码。 The onclick=validate()
line is outside of that scope and that is why your function isn't being called. onclick=validate()
行不在该范围内,因此未调用您的函数。
However, instead of moving the validate()
function outside of the document.ready()
callback (thus making it global, which is a bad thing), you really should remove the onclick
inline HTML event attribute as this is a bad practice ( see this for several reasons why) and do the event binding in the script area. 但是,不要将
validate()
函数移到document.ready()
回调之外(因此使其成为全局变量,这是一件坏事),实际上应该删除onclick
内联HTML事件属性,因为这是一个不好的做法( 请参见这有几个原因),然后在脚本区域中进行事件绑定。 This approach will allow you to set up the event in the same scope as the validate()
function and keep the HTML clean: 这种方法将使您可以在与
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); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <label for="name">NAME</label> <input id="contact-name" name="name" placeholder="Please enter your name..." type="text"> <label for="email">EMAIL</label> <input id="contact-email" name="email" placeholder="Please enter your contact email..." type="text"> <label for="email">MESSAGE</label> <textarea id="contact-message" name="message" placeholder="Please enter your message.."></textarea> </form> <button type="button" id="submit">SUBMIT MESSAGE</button>
First, you should avoid inline handlers like that. 首先,您应该避免这样的内联处理程序。 Second, depending on the form submission process.
其次,取决于表单提交过程。 You should have the button inside your
<form>
tags. 您应该在
<form>
标签中包含按钮。 Then add <form method="POST" action="/someurl/to/post/to">
. 然后添加
<form method="POST" action="/someurl/to/post/to">
。
Otherwise, use jQuery and $.ajax()
with a click
event handler: 否则,将jQuery和
$.ajax()
与click
事件处理程序一起使用:
$('#submit').on('click', () {
$.ajax({check properties in jquery api docs}, (result) => {
// do something
},
(e) => {
// do something on error
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.