未捕获的ReferenceError :(函数）未在HTMLButtonElement.onclick中定义

我有一个搜索表单，我试图让它在页面底部输出结果而不重新加载。

 
  
  
  

 
Type First Name 

我希望在单击按钮时使用Ajax调用另一个脚本，在下面显示搜索结果。 我一直收到错误：“未捕获的ReferenceError：未在HTMLButtonElement.onclick上定义searchoutput

这是我的javascript（使用jquery）：

 $( document ).ready(function() { function searchoutput() { if($(".search-field").val().length > 5) { //only shows results when more than 5 characters have been entered var search = $(".search-field").val(); var update = $(".result"); var goal = 0; $.get("query-include.php" , {search: search, goal: goal}) .done(function( data ) { update.empty(); update.append(data); $(this).remove(); }); }; } $( ".search-field" ).keydown(function() { var update =$(".results"); update.empty(); }); }); 

我检查了其他post，花了很长时间试图自己解决问题。 奇怪的是，如果我为“keyup”添加一个事件监听器，以便运行与用户类型相同的函数searchoutput：

 var searchfield = document.getElementById("search"); searchfield.addEventListener("keyup", searchoutput); 

然后我没有得到ReferenceError并且脚本运行正常..我只在按钮点击时得到function问题。

Answer 1

这是一个范围问题 – searchOutput是在$(document).ready()函数的范围内定义的。 您可以尝试在该代码之前为searchOutput声明一个var，然后将其分配给函数，如下所示：

 var searchOutput; $( document ).ready(function() { searchOutput = function () { if($(".search-field").val().length > 5) { //etc. 

Answer 2

我在searchoutput（）的位置添加了一个eventListener;

 $( document ).ready(function() { $('.submit').addEventListener('click', function(){ if($(".search-field").val().length > 5) { //only shows results when more than 5 characters have been entered var search = $(".search-field").val(); var update = $(".result"); var goal = 0; $.get("query-include.php" , {search: search, goal: goal}) .done(function( data ) { update.empty(); update.append(data); $(this).remove(); }); } }); $( ".search-field" ).keydown(function() { var update =$(".results"); update.empty(); }); });