The code bellow is pulling data from Giphy. I am trying to let the user search a term and display the images on the page. I currently have one image displaying and it is creating a cookie trail of buttons that allow the user to go back and click images they have seen before. I need to loop through and display one image for each image url returned from console.log(data). I can get the data to display the image urls in the console but not create a button for each. Any help is appreciated.
<div class="wrapper">
<div class="container">
<div id="animalButtons"></div>
<form class="input-append">
<div id="field">
<input class="input" id="formValueId" type="text" placeholder="Type something"/>
<input type="button" class="myButton" value="Search" />
</div>
</form>
<div id="field1"></div>
<div id="searchResults"></div>
</div>
</div>
function buttonFeature(value){
request.open('GET', 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q='+value, true);
request.send('GET', 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q='+value, true);
};
document.addEventListener('DOMContentLoaded', function () {
$(document).ready(function() {
$('.myButton').click(function(e) {
var searchFeature = ($('#formValueId').val());
request = new XMLHttpRequest;
request.open('GET', 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q='+searchFeature, true);
var next = 1;
var searchFeature = ($('#formValueId').val());
//console.log(searchFeature);
e.preventDefault();
var addto = "#field" + next;
next = next + 1;
var newIn = '<button id="newButton" value='+searchFeature+' onclick="buttonFeature(this.value)">'+searchFeature+'</button>';
var newInput = $(newIn);
$(addto).after(newInput);
request.onload = function() {
for (var i = 0; i <= 10; i++) {
data = JSON.parse(request.responseText).data[i].images.fixed_height.url;
console.log(data);
document.getElementById("searchResults").innerHTML = '<center><img src = "'+data+'" title="GIF via Giphy"></center><br>';
}
};
request.onerror = function() {
console.log('connection error');
};
request.send();
});
});
});
