Код выводит картинку, пол, имя, фамилию каждого человека из json файла на др сайте через get ajax. Надо сделать при клике на блок с персонажем вывод подробной информации, которая хранится там же, а именно, город штат, картинку побольше. строки 22-28 клик и вывод есть, а связать с инфой ajax запроса не знаю как. наставьте на путь истинный)
window.onload = function() {
var output = document.body;
var ajaxhttp = new XMLHttpRequest();
var url = "https://api.randomuser.me/1.0/?results=50&nat=gb,us&inc=gender,name,location,email,phone,picture";
function createItem(picSrc, title, first, last) {
var div = document.createElement('div');
div.innerHTML = '<div class="user-block"><div class="user-block-img"><img src="' + picSrc + '" /></div><ul class="user-block-list"><li>' + title + '</li><li>' + first + '</li><li>' + last + '</li></ul></div>';
return div;
}
ajaxhttp.open("GET", url, true);
ajaxhttp.setRequestHeader("content-type", "application/json");
ajaxhttp.onreadystatechange = function() {
if (ajaxhttp.readyState == 4 && ajaxhttp.status == 200) {
var jcontent = JSON.parse(ajaxhttp.responseText);
var listWrapper = document.createElement('div');
jcontent.results.forEach(function (userJSON) {
listWrapper.appendChild(createItem(userJSON.picture.medium, userJSON.name.title, userJSON.name.first, userJSON.name.last));
});
document.body.appendChild(listWrapper);
var userBlocks = document.getElementsByClassName('user-block');
for (var i = 0; i < userBlocks.length; i++) {
userBlocks[i].onclick = function()
{
alert ('hello');
}
}
}
}
ajaxhttp.send(null);
}
