Wikipedia APIからデータを取得できません

Question

私は、検索用語を入力してWikipedia検索結果のリストを表示する「Wikipedia Viewer」プロジェクトに取り組んでいますが、は完全なものからにはなりません。

これまで、最初の検索語句を表示するコードを作成しました。しかし、それは動作しません。

マイHTML：

<div class="container-fluid"> 
 

 
<div class="searchAndButtons"> 
 
    
 
<input type="text" id="search"> 
 
    <button class="btn" id="searchBut">Search</button> 
 
    <form action="https://en.wikipedia.org/wiki/Special:Random"><button class="btn">Random Wiki Article</button> 
 
    </form> 
 
    </div> 
 
    <div class="searchResults"> 
 
    </div> 
 
    
 
    
 
    </div>

マイCSS：

.container-fluid{ 
 
    padding:5%; 
 
} 
 
.searchAndButtons{ 
 
    text-align:center; 
 
}

マイJavascriptを：

私が間違っているつもりです

$(document).ready(function(){ 
 
    $("#searchBut").on("click",function(){//this is click handler 
 
    var searchTerm=document.getElementById("#search").value; 
 
    searchTerm=searchTerm.replace(/\s/g,"+"); 
 
    
 
    $.getJSON("http://en.wikipedia.org/w/api.php?action=query&prop=revisions&titles="+searchTerm+"&rvprop=content&format=json&rvsection=0&rvparse=1",function(json){ 
 
     $(".searchResults").html(JSON.stringify(json)); 
 

 
     }); 
 
    }); 
 
    }); 
 

？コードをCodepenで実行してコンソールを確認すると、 "TypeError：document.getElementById（...）is null"というエラーが表示されます。 codepenのマイプロジェクト - link

Answer 1

$(document).ready(function(){ 
    $("#searchBut").on("click",function(){//this is click handler 
    var searchTerm=document.getElementById("search").value; 
    searchTerm=searchTerm.replace(/\s/g,"+"); 

    $.getJSON("http://en.wikipedia.org/w/api.php?action=query&prop=revisions&titles="+searchTerm+"&rvprop=content&format=json&rvsection=0&rvparse=1",function(json){ 
     $(".searchResults").html(JSON.stringify(json)); 

     }); 
    }); 
    }); 

は、これであなたのJSコードを更新します。あなたはあなたの助けのために、次の

$(document).ready(function(){ 
     $("#searchBut").on("click",function(){//this is click handler 
     var searchTerm=document.getElementById("search").value; 
     searchTerm=searchTerm.replace(/\s/g,"+"); 



    $.ajax({ 
       url: 'http://en.wikipedia.org/w/api.php?action=query&prop=revisions&titles="+searchTerm+"&rvprop=content&format=json&rvsection=0&rvparse=1', //your request URL 
       type: 'GET', 
       dataType: 'json', 
       success: function() { alert('hello!'); }, 
       error: function() { alert('boo!'); }, 
       beforeSend: setHeader 
      }); 
      }); 

      function setHeader(xhr) { 
      xhr.setRequestHeader('securityCode', 'Foo'); //your header key and value 
      } 

     }); 
     });