検索結果は自動的に表示されません

giphy APIを使用してGiphy Gif検索アプリを構築しています。検索テキストに新しいものを入力しようとするたびにうまく機能し、新しい検索結果が表示されない限り私はページをリロードする。検索結果は自動的に表示されません

次のようなHTMLコード：私は上記のすべてのJSコードを貼り付けると疑問に思って

document.querySelector(".js-go").addEventListener("click",function(e){ 
var input = document.querySelector("input").value; 
searchGiphy(input); 
}); 
document.querySelector(".js-userinput").addEventListener("keyup",function(e){ 
var input = document.querySelector("input").value; 
if(e.which == 13){ 
    searchGiphy(input);  
} 
}); 
function searchGiphy(searchResult){ 

var url = "http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=" + searchResult; 
var GiphyAJAXCall = new XMLHttpRequest(); 
    GiphyAJAXCall.open("GET",url); 
    GiphyAJAXCall.send(); 

    GiphyAJAXCall.addEventListener("load",function(e){ 
     var data = e.target.response; 
     pushToDOM(data); 
    }); 
} 
function pushToDOM(input){ 
var response = JSON.parse(input); 

var imageUrls = response.data; 
var container = document.querySelector(".js-container"); 

imageUrls.forEach(function(image){ 

var src = image.images.fixed_height.url; 
container.innerHTML += "<img src=\"" + src + "\" class=\"container-image\">"; 

    }); 
}

私は間違っている：

<html> 
    <head> 
     <title>My Giphy Search App</title> 


    <style> 
.container-image { 
    width: 30%; 
    display: inline-block; 
    float: left; 
    margin-right:3%; 
} 
</style> 
</head> 
<body> 
    <div class="container container-padding50"> 
     <input type="text" class="js-userinput container-textinput" placeholder="refresh the page if you wanna searching more"> 

     <button class="js-go container-button">Go!</button> 
    </div> 
    <div class="js-container">   
    </div> 
    <script src ="javascript/main.js"></script> 

</body>

main.jsファイル内のjsコードとしてアヤックスはここに電話している？これを手伝ってくれる人もいますか？

出典

2017-07-20 mystreie

コードは問題なく機能します。 –

私が何か新しいものを入力しているときはいつも、私は結果が自動的にポップアップしない検索テキスト – mystreie

どうすれば簡単なクリック "go"ボタンでそれを実現できますか？ – mystreie

すでに存在するものを置き換えるのではなく、現在のhtmlの最後に結果を追加しています。代わりに別の変数を使用して構築している新しいhtmlストリングを作成してから、完了したらコンテナのinnerHTMLを新しいストリングに置き換えます。

function pushToDOM(input){ 
var response = JSON.parse(input); 
var imageUrls = response.data; 
var container = document.querySelector(".js-container"); 
var html = ""; 

imageUrls.forEach(function(image){ 
    var src = image.images.fixed_height.url; 
    html += "<img src=\"" + src + "\" class=\"container-image\">"; 
}); 
container.innerHTML = html; 
}

出典

2017-07-20 18:26:50 aalcutt

それは私のために働いてくれてありがとう、私のアヤックスには問題はない？ innerHTMLのみ。 – mystreie

私はそれに何の問題も見ませんでした。 – aalcutt

検索結果は自動的に表示されません

答えて

関連する問題