Estou tentando fazer um visualizador da wikipedia para o projeto front-end da FreeCodeCamp. Então estou trabalhando com a API da Wikipedia. Já fiz de tudo, mas não consigo achar o que há de errado com meu código... Por que ele não está funcionando?
Meu código HTML
<!-- título, etc -->
<div class = "header">
<h1>Wikipedia Viewer</h1>
<h4> Projeto para Free Code Camp</h4>
<!-- link pra página aleatória
<a href="https://en.wikipedia.org/wiki/Special:Ramdom"></a> -->
</div>
<!-- barra de pesquisa -->
<div class = "container">
<input class="form-control" id="searchTerm" placeholder = "Digite aqui">
<button id = "getResult" type = "button" class = "btn btn-primary"> Vá </button>
</div>
<!-- resultados da pesquisa -->
<div class="resultbox"
<ul id="output">
</ul>
</div>
Meu código JavaScript:
$(document).ready(function() {
$("#getResult").click(function() {
var searchTerm = $("#searchTerm").val();
var url =
"https://en.wikipedia.org/w/api.php?action=opensearch&search=" +
searchTerm +
"&format=json&callback=?";
$.ajax({
type: "GET",
url: url,
async: false,
dataType: "json",
success: function(data) {
$("#output").html(" ");
for (var i = 0; i < data[1].length; i++) {
$("#output").prepend(
"<li><a href= " +
data[3][i] +
">" +
data[1][i] +
"</a><p>" +
data[2][i] +
"</p></li>"
);
}
},
error: function(errorMessage) {
alert("Error");
}
});
});
});
Vocês podem checar meu projeto aqui : https://codepen.io/leojunioyuri/pen/jGEVdL
Agradeço desde já. Qualquer ajuda é necessária.