点击按钮不调用功能 [英] onclick for button not calling function

问题描述

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

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script> ;<形式> < label for =name> NAME< / label> < input id =contact-namename =nameplaceholder =请输入您的名字...type =text> < label for =email> EMAIL< / label> < input id =contact-emailname =emailplaceholder =请输入您的联系人电子邮件...type =text> < label for =email> MESSAGE< / label> < / textarea>< / form>< button type =buttonid =submit onclick =validate（）;> SUBMIT MESSAGE< / button>  

你应该在 $>之外写入 validate（）函数 （document）.ready 作为 onclick 在绑定时加载DOM - while $ （document）.ready scopes 函数。

这意味着函数是 local $（document）.ready 。中，则全局 / p>

请参阅下面的演示：

  function validate（）{var contactName = docume 。nt.getElementById（ 接触名称）值; alert（Thank you+ contactName）;}  

< ;形式> < label for =name> NAME< / label> < input id =contact-namename =nameplaceholder =请输入您的名字...type =text> < label for =email> EMAIL< / label> < input id =contact-emailname =emailplaceholder =请输入您的联系人电子邮件...type =text> < label for =email> MESSAGE< / label> < / textarea>< / form>< button type =buttonid =submit onclick =validate（）;> SUBMIT MESSAGE< / button>

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.

$(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.

This means the function is local to the closure and will not be visible globally if its written so inside $(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>

这篇关于点击按钮不调用功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！