30 lines
1.1 KiB
JavaScript
30 lines
1.1 KiB
JavaScript
|
document.getElementById("btnajax").onclick = function() {
|
||
|
|
let xhr = new XMLHttpRequest
|
||
|
|
|
||
|
|
xhr.onreadystatechange = function() {
|
||
|
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
||
|
|
let users = JSON.parse(xhr.responseText)
|
||
|
|
let htmlcucc = ""
|
||
|
|
|
||
|
|
for (let egy of users.data) {
|
||
|
|
htmlcucc += `<h3 id="${egy.id}"> ${egy.first_name} ${egy.last_name}</h3>`
|
||
|
|
htmlcucc += `<p id="p${egy.id}" style="display: none"><img src="${egy.avatar}"><br><small>${egy.email}</small></p>`
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById("msg").innerHTML = htmlcucc
|
||
|
|
|
||
|
|
document.querySelectorAll("h3").forEach(a => a.addEventListener("click", e => {
|
||
|
|
if (document.getElementById(`p${e.target.id}`).style.display == "block") {
|
||
|
|
document.getElementById(`p${e.target.id}`).style.display = "none"
|
||
|
|
}
|
||
|
|
|
||
|
|
else {
|
||
|
|
document.getElementById(`p${e.target.id}`).style.display = "block"
|
||
|
|
}
|
||
|
|
}))
|
||
|
|
}
|
||
|
|
}
|
||
|
|
xhr.open("GET", "https://reqres.in/api/users?page=2", true)
|
||
|
|
xhr.send()
|
||
|
|
}
|