API呼び出しの検索ボックス

私のコードで何が間違っているのか分かりません。私は検索入力ボックスに何かを入力して検索ボタンをクリックした後にgif画像を表示しようとしています。API呼び出しの検索ボックス

var button = document.createElement('button'); 
document.body.appendChild(button); 
button.innerHTML = "Search" 

var input = document.createElement("input"); 
document.body.appendChild(input); 

function afterLoad() { 
    var data = JSON.parse(this.responseText) 
    var image = document.createElement('img') 
    image.src = data.data[0].images.original.url 
    document.body.appendChild(image) 
    } 

function afterClick() { 
    var terms = target.value.split(' ').join('+') 
    alert(terms); 
    var request = new XMLHttpRequest() 
    request.addEventListener('load', afterLoad) 
    request.open('GET', 'http://api.giphy.com/v1/gifs/search?q='+terms+'&limit=1&api_key=dc6zaTOxFJmzC') 
    request.send() 

    } 

button.addEventListener("click", afterClick)

出典

2016-09-07 alaw

だけで画像を表示するためのポイントですか？ XHRの代わりに、 'img'要素を作成し、その関数でビルドしているURLを使って' src'を直接設定し、次に 'appendChild（）'をページに設定しますか？ – mherzig

はいポイントはイメージを表示することです。 – alaw

var button = document.createElement('button'); 
 
document.body.appendChild(button); 
 
button.innerHTML = "Search"; 
 

 
var input = document.createElement("input"); 
 
input.id = "search"; // *** set id *** 
 
document.body.appendChild(input); 
 

 
function afterLoad() { 
 
    var data = JSON.parse(this.responseText); 
 
    var image = document.createElement('img'); 
 
    console.log(data); 
 
    image.src = data.data[0].images.original.url; 
 
    document.body.appendChild(image); 
 
    } 
 

 
function afterClick() { 
 
    // changed target to focus search 
 
    var terms = document.getElementById("search").value.split(' ').join('+'); 
 
    alert(terms); 
 
    var request = new XMLHttpRequest(); 
 
    request.addEventListener('load', afterLoad); 
 
    request.open('GET', 'http://api.giphy.com/v1/gifs/search?q='+terms+'&limit=1&api_key=dc6zaTOxFJmzC'); 
 
    request.send(); 
 

 
    } 
 

 
button.addEventListener("click", afterClick);

<body></body>

あなたがターゲットを定義していませんでした。入力にIDを与え、値をとった。うまく動作します。

編集：私は「XXXXX」を検索する場合 画像が表示されます

出典

2016-09-07 20:53:10 Slatyoo

API呼び出しの検索ボックス

答えて

関連する問題