Demo: Display Different Banners Based on Continent

HTML codes:

<style>
#xbanner {
width:300px;
height:250px;
}
</style>
<div id="xbanner"></div>
<script>
var endpoint = 'https://apip.cc/json';
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
if(response.status !== 'success') {
console.log('Query failed: ' + response.message);
return;
}
var banner = document.getElementById('xbanner');
// Change banner based on the continent code
switch(response.ContinentCode) {
case "EU":
banner.innerHTML = '<a href="https://apip.cc/display-different-banners-based-on-visitors-continent.html"><img src="https://apip.cc/eubanner.png" alt="Europe Banner"></a>';
break;
case "NA":
banner.innerHTML = '<a href="https://apip.cc/display-different-banners-based-on-visitors-continent.html"><img src="https://apip.cc/nabanner.png" alt="North America Banner"></a>';
break;
case "SA":
banner.innerHTML = '<a href="https://apip.cc/display-different-banners-based-on-visitors-continent.html"><img src="https://apip.cc/sabanner.png" alt="Asia Banner"></a>';
break;
case "AS":
banner.innerHTML = '<a href="https://apip.cc/display-different-banners-based-on-visitors-continent.html"><img src="https://apip.cc/asbanner.png" alt="Asia Banner"></a>';
break;
case "AF":
banner.innerHTML = '<a href="https://apip.cc/display-different-banners-based-on-visitors-continent.html"><img src="https://apip.cc/afbanner.png" alt="Asia Banner"></a>';
break;
case "OC":
banner.innerHTML = '<a href="https://apip.cc/display-different-banners-based-on-visitors-continent.html"><img src="https://apip.cc/ocbanner.png" alt="Asia Banner"></a>';
break;
default:
banner.innerHTML = '<a href="https://apip.cc/display-different-banners-based-on-visitors-continent.html"><img src="https://apip.cc/defbanner.png" alt="Default Banner"></a>';
}
}
};
xhr.open('GET', endpoint, true);
xhr.send();
</script>

Result: