The sample show the usage of 'onLoad' event and view of the result to an image
//this sample code needs to be completed to work with all types of pets
//currently working only with Dogs
var webAddr = 'https://dog.ceo/api/breeds/image/random';
function changePet(){
var selectedPet = document.querySelector('#pets').value; //select the pet
switch(selectedPet) {
case 'Dogs':
webAddr = 'https://dog.ceo/api/breeds/image/random'; //set the url of the 'open' action
case 'Cats':
webAddr = 'https://aws.random.cat/meow';
case 'Foxes':
webAddr = 'http://randomfox.ca/floof';
}
}
function makeRequest() {
var httpRequest = new XMLHttpRequest();
httpRequest.responseType = 'json';
httpRequest.onload = function() { //using the onLoad event
if (httpRequest.status === 200){
console.log(httpRequest.response);
var json = httpRequest.response;
document.querySelector('.image').src = httpRequest.response.message; //message is for 'dogs'
} else {
alert('There was a problem with the request. \r\n The Page has returned error number: ' + httpRequest.status)
}
};
httpRequest.open('GET', webAddr);
httpRequest.send();
}
//this sample code needs to be completed to work with all types of pets