JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<a href="" val="1">1</a>
<a href="" val="2">2</a>
<a href="" val="3">3</a>
<a href="" val="4">4</a>
<a href="" val="5">5</a>

<div id="demo">
</div>

CSS

div {
	width: 100px;
	height200px;
}

JavaScript

(function() {
	var pokemon = document.getElementsByTagName('a');
	for(var i = 0; i < pokemon.length; i++) {
		pokemon[i].onclick = function() {
			toggleStatus(this.getAttribute('val'));
			return false;
		}
	}
})();

var toggleStatus = function(id) {
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			// Typical action to be performed when the document is ready:
			document.getElementById("demo").innerHTML = xhttp.responseText;
		}
	};
	xhttp.open("GET", "https://pokeapi.co/api/v2/pokemon/" + id, true);
	xhttp.send();
};