Javascript Ajax success image replace - php

Question

I have problem.
That code should change image on site after success or error:
pastebin
if(isset($func) and $func == 'claim_bonus'){
global $ado;
$user = escape($_GET['user']);
$type = escape($_GET['type']);
$now = date("Y-m-d H:i:s");
$points = rand(1,20);
$query = $ado->exec("INSERT INTO `claimed_bonuses` SET `user` = '$user', `date` = '$now', `type` = '$type'");
$query1 = $ado->exec("INSERT INTO `history` SET `user` = '$user', `date` = '$now', `type` = 'bonus', `amount` = '$points', `title` = 'Bonus Claimed', `description` = '$user claimed bonus $points points'");
$query2 = $ado->exec("update `balances` SET `actual` = actual+$points, `total` = total+$points");
if ($query && $query1 && $query2) {
echo "<img src=\"/img/bonus/add_used.png\" width=\"30%\" height=\"30%\" alt=\"Bonus claimed\" />";
} else {
echo "<img src=\"/img/bonus/error.png\" width=\"30%\" height=\"30%\" alt=\"Error\" />";
}
}
Im calling ajax using ajax.js file
// JavaScript Document
var xmlhttp=false;
function claimbonus(user, type, id){
xmlhttp = new XMLHttpRequest();
xmlhttp.abort();
xmlhttp.open("GET", "/functions/ajax.php?func=claim_bonus&user="+user+"&type="+type, true);
xmlhttp.onreadystatechange=function() {
if(xmlhttp.status == 200) {
document.getElementById(id).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
And code is loaded on page.
Script is returning image but it doesnt replace old image.
Image code:
<img src="img/bonus/add.png" width="30%" height="30%" alt="Claim bonus" id="add_img" onclick="claimbonus(<?php echo $_SESSION['userid']; ?>, '<?php echo $type; ?>', 'add_img'); return false"/>
I hope someone can help me

Answer 1

You are replacing the innerHTML of the image tag. Wrap in a div or span and replace that instead and quote the userid too
<span id="add_img"><img
src="img/bonus/add.png" width="30%" height="30%"
alt="Claim bonus"
onclick="claimbonus('<?php echo $_SESSION['userid']; ?>',
'<?php echo $type; ?>', 'add_img')/></span>