How can I retrieve data with a name tag from JSON data using Ajax? The function showCard is not functioning properly when I try to grab data with a name tag. My goal is to display the name of the API data when an img element with the class found is clicked, but currently nothing happens when clicked.
p.s. The id is added in the populatePokedex function. Hopefully this question makes sense. Thank you.
(function() {
'use strict';
window.onload = function(){
populatePokedex(); // <- This works correctly
var $foundPics = document.getElementsByClassName("found");
for(var i = 0; i < $foundPics.length; i++){
$foundPics[i].onclick = showCard;
}
};
// populate Pokedex
function populatePokedex() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://webster.cs.washington.edu/pokedex/pokedex.php?pokedex=all");
xhr.onload = function(){
if (this.status == 200) {
var picArr = this.responseText.split("\n");
for(var i=0; i < picArr.length; i++){
var eachName = picArr[i].split(":");
var spriteurl = "/Pokedex/sprites/" + eachName[1];
var imgClass = 'sprite';
if(eachName[1]==='bulbasaur.png' || eachName[1]==='charmander.png' || eachName[1]==='squirtle.png'){
imgClass += ' found';
} else {
imgClass += ' unfound';
}
document.getElementById("pokedex-view").innerHTML += "<img src=\"" + spriteurl + "\" id=\"" + eachName[0] + "\" class=\"" + imgClass + "\">";
}
} else {
document.getElementById("pokedex-view").innerHTML = "ERROR: Status: " + this.status + ", " + this.statusText;
}
};
xhr.onerror = function(){
document.getElementById("pokedex-view").innerHTML = "ERROR";
};
xhr.send();
}
// if the pokemon is found, it shows the data of the pokemon
function showCard() {
var xhr = new XMLHttpRequest();
var url = "https://webster.cs.washington.edu/pokedex/pokedex.php?pokemon=" + this.id;
xhr("GET", url);
xhr.onload = function(){
var data = JSON.parse(this.responseText);
var pokeName = document.getElementsByClassName("name");
for(var i=0; i < pokeName.length; i++){
pokeName[i].innerHTML = data.name;
}
};
xhr.onerror = function(){
alert("ERROR");
};
xhr.send();
}
})();
Part of HTML is listed below;
<div id="my-card">
<div class="card-container">
<div class="card">
<h2 class="name">Pokemon Name</h2>
<img src="icons/fighting.jpg" alt="weakness" class="weakness" />
</div>
</div>
</div>
<!-- You populate this using JavaScript -->
<div id="pokedex-view"></div>