Question

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

<form action='' method='post'>
<div id="search-form">      
<input type="text" name="search" class="search-field" id="search" value="" />
<div class="submit-container">
<button type="button" value="" class="submit" id="searchbutton" onclick="searchoutput()" /></button>
            </div>
  </form>
  <br><br>
  <p>Type First Name</p>

我希望在单击按钮时使用Ajax调用另一个脚本在下面显示搜索结果。我一直收到错误：＆＃34;未捕获的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();
                                       });
                             });

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

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

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

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

＆＃13;

$( 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();
                                       });
                             });

＆＃13;

Answer 3

就我而言，我在我的 JS 中使用模块化代码（即导入和导出语句），所以当我尝试使用 onclick 时，它没有调用我的 submit 函数。当我简单地从我的 JS 代码中删除 import 语句并用一些默认值替换依赖代码时，onclick 调用了我的函数。然后我用 addEventListener 尝试了 import/export，最后它对我有用。

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

3 个答案: