Currently, I am fetching data from pokeapi.co and dynamically inserting it into a table. This data includes various stats and an image. My goal is to make the image rotate when hovered over. While creating the table, I added an id="pokeImage" dynamically. Initially, I attempted to achieve this using CSS:
#pokeImage:hover {-webkit-transform: rotate(360deg);
transform: rotate(360deg);}
and also with jQuery:
$('#pokeImage').on('click', function () {
$(this).css({
transform: 'rotate(' + (Math.random()*45+45).toFixed(3) + 'deg)'
});
However, these approaches were ineffective. I'm seeking guidance on how to accomplish this task. Any advice would be greatly appreciated. Thank you.
EDIT: Here is how I am fetching data, populating a table, and displaying it:
$('#getPokemons').click(function(){
var table = document.createElement('table');
table.className = "table table-condensed";
table.setAttribute("id", "ajaxTable");
var header = document.createElement('tr');
header.innerHTML = '<th> Name </th><th> Image </th><th> HP </th>';
header.setAttribute("id", "tableHeader");
table.appendChild(header);
var random = Math.floor(Math.random()*100);
for(var i = random ; i <= random + 10; i++){
$.ajax({
type: "GET",
url: "http://pokeapi.co/api/v2/pokemon/"+i+"/",
dataType: 'json',
success: function(response){
var name = response.forms[0].name;
var imgUrl = response.sprites.front_default;
var hpName = response.stats[5].stat.name ;
var hpVal= response.stats[5].base_stat;
var row = document.createElement('tr');
row.innerHTML = '<td>' + name + '</td>' + '<td>' + '<img id="pokeImage" src ="'+imgUrl+'"/>' + '</td>' + '<td>' + hpVal + '</td>';
$('#pokedex1').append(row);
}
});} $('#pokedex1').append(table);});