Javascript/API-搜索结果未显示

我不熟悉API

我的问题：看起来我的代码在什么地方不正确。搜索不起作用

如何获得用户搜索的特定搜索结果

Giphy API的GitHub链接位于以下位置：

JS

document.addEventListener（'DOMContentLoaded'，函数（）{
//q=“”；
var searchTerm=prompt（'请输入一个单词：）；
searchTerm=searchTerm.trim（）.replace（//g，“+”）；//在空格所在的位置添加一个+
请求=新的XMLHttpRequest；
//request.open（'GET'，'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=“+q，正确）；
request.open（'GET'，'http://api.giphy.com/v1/gifs/search?q=“+searchTerm+”&api_key=dc6zaTOxFJmzC”）；
request.onload=函数（）{
如果（request.status>=200&&request.status<400）{
data=JSON.parse（request.responseText）.data.image\uURL；
控制台日志（数据）；
document.getElementById（“here_is_gif”）.innerHTML=''；
}否则{
log（'已到达giphy，但API返回错误'）；
}
jQuery（函数（）{
$（“#表单值”）.keyup（函数（）{
var searchTerm=$（“#表单值”）.val（）.trim（）.toLowerCase（）；
$（“#此处为_gif”）.text（值）；
});
});
};
request.onerror=函数（）{
log（“连接错误”）；
};
request.send（）；
});

HTML

让我们搜索一些gif！
在下面搜索GIF的精彩世界

搜索GIF

因此，问题在于您没有通过返回数据使用正确的对象路径：

data = JSON.parse(request.responseText).data;
if(data.length > 0) {
    document.getElementById("here_is_gif").innerHTML = '<center><img src = "'+data[0].images.original.url+'" title="GIF via Giphy"></center>'; // use the first image returned... But data is an array, so you might want to loop over it and add more than one image....
}

希望这有帮助

<h1> Let's Search Some Gifs! </h1>
<div class="info">
    <p> Search below to the wonderful world of Gifs! </p>
        <form class="gif-form">
            <input type="text" id="form-value" class="search-input-rounded">
            <button type="submit" class="search_button"> Search for GIFs </button>
            <input type="reset" value="Reset">
        </form>
        <div class="rando_facts animated bounceIn">
            <p id="here_is_gif"> </p>
        </div>
</div>

data = JSON.parse(request.responseText).data;
if(data.length > 0) {
    document.getElementById("here_is_gif").innerHTML = '<center><img src = "'+data[0].images.original.url+'" title="GIF via Giphy"></center>'; // use the first image returned... But data is an array, so you might want to loop over it and add more than one image....
}

$("#here_is_gif").text(value); // should be $("#here_is_gif").text(searchTerm);