Uncaught ReferenceError：HTMLButtonElement.onclickで（関数）が定義されていません

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を使用して、検索結果を下に表示します。私はエラーを取得しておいてください。「キャッチされないにReferenceErrorを：searchoutputがここHTMLButtonElement.onclick

で定義されていない私の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(); 
             }); 
          }); 

私は他の記事をチェックして過ごしてきましたユーザーのタイプと同じ関数searchoutputを実行するために、「keyup」のイベントリスナーを追加すると、奇妙なことに奇妙なことがあります。

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を追加します）。

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