jsonリクエストに入力された入力をどのように取得するのですか？

Question

私は入力要素の中に入力されたテキストをJSON要求に使用できるようにしようとしています。

$("document").ready(function() { 
    var search = $('#input').val() 
    var api = 
    "https://en.wikipedia.org/w/api.php?callback=?&action=opensearch&format=json&search=" + 
    search + 
    "&namespace=0&limit=10&profile=fuzzy&suggest=1"; 

    // Button function 
    $(".btn").click(function() { 
    function listClear() { 
     $("ul").empty(); 
    } 
    listClear(); 
    $.getJSON(api, function(data) { 
     function listCreate() { 
     var arr = data[1]; 
     for (i = 0; i < arr.length; i++) { 
      $("ul").append("<li>" + arr[i] + "</li>"); 
     } 
     } 

     listCreate(); 
    }); 
    }); 
}); 

は、私の要素は、私はこのようにそれを行うと、コンソールは未定義の長さが見つからないというエラーを示し、この

<input type="search" id="input" class="form-control" placeholder=". . ."> 

のように見えます。私はこれが私の現在の価値の取得方法が機能していないことを意味します。何か案は？

ps。私もcodepen（https://codepen.io/WatchConnorCode/pen/JybGVJ?editors=1010）でこのコーディングをしていますそれは問題を引き起こすかどうかわかりません？

編集：私は前にvalでそれを戻して忘れました。まだ意図したとおりに動作していません。

Answer 1

の代わりに.val()を最初に使用します。

セカンドクリック機能上の内側searchとapiの定義を移動

$("document").ready(function() { 

    // Button function 
    $(".btn").click(function() { 
    var search = $('#input').val() 
    var api = 
    "https://en.wikipedia.org/w/api.php?callback=?&action=opensearch&format=json&search=" + 
    search + 
    "&namespace=0&limit=10&profile=fuzzy&suggest=1"; 
    function listClear() { 
     $("ul").empty(); 
    } 
    listClear(); 
    $.getJSON(api, function(data) { 
     function listCreate() { 
     var arr = data[1]; 
     for (i = 0; i < arr.length; i++) { 
      $("ul").append("<li>" + arr[i] + "</li>"); 
     } 
     } 

     listCreate(); 
    }); 
    }); 
}); 

https://codepen.io/anon/pen/eEvWLz?editors=1010

Answer 2

text()を使用して入力のテキストを取得しようとしていますが、代わりにval()を使用してください。

詳細については、How do I get the value of text input field using JavaScript?を参照してください。

また、ボタンクリック時に入力に存在するテキストを取得しようとすると、api値を作成するコードをclick関数内に移動する必要があります。つまり、DOMの読み込みが完了すると、それを一度評価しています。