CodePenでAjaxが動作しない

Question

私はfreeCodeCampからWikipedia Viewerプロジェクトをやっています。何らかの理由で、クリックするとコンソールに何も表示されないので、ajax関数は機能していません。そのコードを以下に示します。これを見ている人には、事前に感謝します。

$(document).ready(function() { 
    $("search").click(function() { 
    var searchTerm = $("searchTerm").val(); 
    var url1 = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&format=json&callback=?"; 
    $.ajax({ 
     type: "GET", 
     url: url1, 
     async: false, 
     dataType: "json", 
     success: function(data) { 
     console.log(data); 
     }, 
     error: function(errorMessage) { 
     alert("Error"); 
     } 
    }); 
    }); 
}); 

Answer 1

がsearchとsearchTermを再確認してください表示されます。彼らはidまたはclassですか？クラスについては

1. 、idに$(".search")
2. を書き、次のコードは、私の作品$("#search")

を書きます。あなたのコードのこの領域では

$(document).ready(function() { 
 
    $("#search").click(function() { 
 
    var searchTerm = "usa"; 
 
    var url1 = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&format=json&callback=?"; 
 
    $.ajax({ 
 
     type: "GET", 
 
     url: url1, 
 
     async: false, 
 
     dataType: "json", 
 
     success: function(data) { 
 
     console.log(data); 
 
     }, 
 
     error: function(errorMessage) { 
 
     alert("Error"); 
 
     } 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="search">Click</button>

Answer 2

あなたのjQueryセレクタに問題があると思います。 jQueryもロードしていることを確認してください。

$("searchTerm") tries to find <searchTerm> 

と

$("search") tries to find <search> 

ここで注意すべき重要な部分は、クラスとIDは要素のほとんどの種類を選択するために使用することができることです

$('#search') looks for <input type="text" id="search"> 
$('.search') looks for <input type="text" class="search"> 
$('input[type="text"]') looks for <input type="text"> 

$('#searchBtn') looks for <button id="search">Click Me</button> 
$('.searchBtn') looks for <button class="search">Click Me</button> 
$('button') looks for <button>Click Me</button> 

...のようなIDやクラスを使用してみてください。だから、#searchはボタン、テキスト入力、テキストエリア、何でもかまいません。または、何をしようとしていたかのような要素を選択することもできます。

例：https://jsfiddle.net/gfa6agok/9/ - コンソール出力

Answer 3

：

$("search").click(function() { 
    var searchTerm = $("searchTerm").val(); 

あなたはクラスやIDを使用していますか？ あなたがクラスに検索を使用していて、検索語にドットを持っている希望の場合その前に、このように（。）：

$(".search").click(function() { 
    var searchTerm = $(".searchTerm").val(); 

あなたがIDを使用している場合は、検索および検索語が番号記号（＃）を持っています

$("#search").click(function() { 
    var searchTerm = $("#searchTerm").val();