how to use onclick function when image button clicked? - php

Question

i am trying to call a function when clicking an image button below but the function never fires. could any one tell me what i am doing wrong? is there any good jsfiddle type site that i show demo ?
<script>
function deleteLike(a,b)
{
alert("PageLink:"+a+"\nId:"+b);
}
</script>
<?php
$i="23";
$pageLink="http://www.nba.com";
echo '<div id="'.$i.'" style="float: right; padding: 5px 2px 2px;"> <img class="liker" onclick="deleteLike("'.$PageLink.'","'.$i.'")" src="http://cultureslurp.com/wp-content/uploads/2011/09/Facebook-Like-Button.jpg" border="0"></div>';
?>

Answer 1

try doing:
echo '<div id="'.$i.'" style="float: right; padding: 5px 2px 2px;"> <img class="liker" onclick="deleteLike(\''.$PageLink.'\',\''.$i.'\')" src="./liked.png" border="0"></div>';

Answer 2

You can't have
onclick="deleteLike("");"
Instead use:
onclick="deleteLike('');"
Like this:
echo "<div id='$i' style='float: right; padding: 5px 2px 2px;'> <img class='liker' onclick=\"deleteLike('$PageLink','$i');\" src='http://cultureslurp.com/wp-content/uploads/2011/09/Facebook-Like-Button.jpg' border='0'></div>";

Answer 3

Make your life easy and use jQuery and implement best practices.
Look at this code. Works also for people without javascript enabled!
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function(){
$('.a-liker').click(function(e){
e.preventDefault();
alert("PageLink: " + $(this).attr('href'));
alert("Id: " + $(this).parent().attr('id'));
});
});
</script>
<div id="23" style="float: right; padding: 5px 2px 2px;">
<a href="http://www.nba.com" class="a-liker">
<img class="liker" src="./liked.png" border="0">
</a>
</div>